Content Modules, Content containers, Swiss Confederation Web Guidelines

Elements list

FLEX

Translations

The elements list is a very generic element that groups content elements in a list. The elements shown here are merely examples.

all

23.05.2012
Medienmitteilung 1

Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien

23.05.2012
Medienmitteilung 2

Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien

23.05.2012
Medienmitteilung 3

Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien

all

Publication's title : Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.

Publication's title : Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.

Publication's title : Lorem ipsum dolor sit amet

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.

<div class="row">
	<div class="col-sm-4 col-sm-offset-2">

		<!-- News list example -->
		<div class="list-group">
			<div class="list-group-header">
				<a href="#" class="pull-right icon icon--before icon--list">all</a>
			</div>
			<div class="list-group-item">
				<p>
					23.05.2012<br> Medienmitteilung 1
				</p>
				<a href="#">
          Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien
        </a>
			</div>
			<div class="list-group-item">
				<p>
					23.05.2012<br> Medienmitteilung 2
				</p>
				<a href="#">
          Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien
        </a>
			</div>
			<div class="list-group-item">
				<p>
					23.05.2012<br> Medienmitteilung 3
				</p>
				<a href="#">
          Offizieller Besuch von Bundespräsident Didier Burkhalter in Italien
        </a>
			</div>
		</div>

	</div>
	<div class="col-sm-4">

		<!-- Publications list example -->
		<div class="list-group">
			<div class="list-group-header">
				<a href="#" class="pull-right icon icon--before icon--list">all</a>
			</div>
			<div class="list-group-item">
				<a href="#">
          Publication's title : Lorem ipsum dolor sit amet
        </a>
				<br>
				<figure class="pull-left">
					<img src="http://placehold.it/78x117" alt="image description">
				</figure>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.
				</p>
			</div>
			<div class="list-group-item">
				<a href="#">
          Publication's title : Lorem ipsum dolor sit amet
        </a>
				<br>
				<figure class="pull-left">
					<img src="http://placehold.it/78x117" alt="image description">
				</figure>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.
				</p>
			</div>
			<div class="list-group-item">
				<a href="#">
          Publication's title : Lorem ipsum dolor sit amet
        </a>
				<br>
				<figure class="pull-left">
					<img src="http://placehold.it/78x117" alt="image description">
				</figure>
				<p>
					Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nec hoc ille non vidit, sed verborum magnificentia est et gloria delectatus. Tum Triarius: Posthac quidem, inquit, audacius.
				</p>
			</div>
		</div>

	</div>
</div>

Below the content of a page, additional information may be shown. This has the purpose of presenting content (e.g. publications, news, or links) that is directly related to the content that is being shown, but which is not mentioned explicitly in the text (in which case it would have an embedded link). This content is arranged in tabs.

This feature is a specific type of horizontal tab navigation. Up to five tabs can be used. The names to be given to the tabs are not predefined. However, the terminology used must be uniform and used consistently throughout a website. The following tabs are possible, for instance: "Documents and Publications", "Services", "Legal Framework", "Links", and "News".

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

link with icon lorem (PDF, 43 pages, 2Mb, English)

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

link with icon lorem (PDF, 43 pages, 2Mb, English)

external link

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, eum amet architecto corporis aut cumque ratione dolores odit et libero impedit ipsa. Enim, deleniti, quae ipsa nostrum doloremque nihil repellendus.

external link

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, eum amet architecto corporis aut cumque ratione dolores odit et libero impedit ipsa. Enim, deleniti, quae ipsa nostrum doloremque nihil repellendus.

Title Lorem ipsum

13.05.2014 - Lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, nam est alias voluptas minus libero quo aliquid consectetur ipsum sapiente dicta temporibus repellat odio nisi at laudantium error tempore illum!

Title Lorem ipsum

13.05.2014 - Lorem
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, nam est alias voluptas minus libero quo aliquid consectetur ipsum sapiente dicta temporibus repellat odio nisi at laudantium error tempore illum!

<div class="row">
	<div class="col-sm-10 col-sm-offset-1">
		<!-- Nav tabs -->
		<ul class="nav nav-tabs">
			<li class="active"><a href="#documents" data-toggle="tab">Documents</a></li>
			<li><a href="#links" data-toggle="tab">Links</a></li>
			<li><a href="#news" data-toggle="tab">News</a></li>
		</ul>

		<!-- Tab panes -->
		<div class="tab-content tab-border">
			<div class="tab-pane active" id="documents">
				<article>
					<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
					<p><a href="#" class="icon icon--before icon--pdf">link with icon lorem <span class="text-dimmed">(PDF, 43 pages, 2Mb, English)</span></a></p>
				</article>
				<hr>
				<article>
					<h4>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</h4>
					<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
					<p><a href="#" class="icon icon--before icon--pdf">link with icon lorem <span class="text-dimmed">(PDF, 43 pages, 2Mb, English)</span></a></p>
				</article>
			</div>
			<div class="tab-pane" id="links">
				<p><a href="#" class="icon icon--after icon--external">external link</a></p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, eum amet architecto corporis aut cumque ratione dolores odit et libero impedit ipsa. Enim, deleniti, quae ipsa nostrum doloremque nihil repellendus.</p>
				<hr>
				<p><a href="#" class="icon icon--after icon--external">external link</a></p>
				<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Expedita, eum amet architecto corporis aut cumque ratione dolores odit et libero impedit ipsa. Enim, deleniti, quae ipsa nostrum doloremque nihil repellendus.</p>
			</div>
			<div class="tab-pane" id="news">
				<!-- Add .clearfix class to prevent errors with floated elements -->
				<article class="clearfix">
					<h4><a href="#">Title Lorem ipsum</a></h4>
					<figure class="pull-left">
						<img src="http://placehold.it/180x113" alt="image description">
					</figure>
					<p><small>13.05.2014 - Lorem</small><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, nam est alias voluptas minus libero quo aliquid consectetur ipsum sapiente dicta temporibus repellat odio nisi at laudantium error tempore illum!</p>
				</article>
				<hr>
				<article class="clearfix">
					<h4><a href="#">Title Lorem ipsum</a></h4>
					<figure class="pull-left">
						<img src="http://placehold.it/180x113" alt="image description">
					</figure>
					<p><small>13.05.2014 - Lorem</small><br> Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolore, nam est alias voluptas minus libero quo aliquid consectetur ipsum sapiente dicta temporibus repellat odio nisi at laudantium error tempore illum!</p>
				</article>
			</div>
		</div>
	</div>
</div>

Collapsible panel

FLEX

3.2.0

remove accordion behavior to make it keyboard accessible

3.1.0

keyboard accessibility fixed

The collapsible panel is an interactive element in which further interactive elements or other contents are hidden. The default setting is closed. The box is opened with a click, and the contents become visible. Another click closes the box again.

Add .collapsed to link for it to change the icon direction when collapsing.

Collapsible Group Item #1

Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #1

Collapsible Group Item #2

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

Collapsible Group Item #3

Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table, raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.

<div class="collapse-box" id="accordion1">
	<a data-toggle="collapse" class="collapsed" href="#collapseOne">Collapsible Group Item #1</a>
	<div id="collapseOne" class="collapse">
		<ul class="list-unstyled">
			<li><a href="#" class="icon icon--before icon--cart">link with icon</a></li>
			<li><a href="#" class="icon icon--before icon--cart">link with icon</a></li>
			<li><a href="#" class="icon icon--before icon--cart">link with icon</a></li>
		</ul>
	</div>
	<a data-toggle="collapse" class="collapsed" href="#collapseTwo">Collapsible Group Item #2</a>
	<div id="collapseTwo" class="collapse">
		<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a
			bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
			raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
	</div>
	<a data-toggle="collapse" class="collapsed" href="#collapseThree">Collapsible Group Item #3</a>
	<div id="collapseThree" class="collapse">
		<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a
			bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
			raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
	</div>
</div>

<br>

<div id="accordion2">
	<a data-toggle="collapse" class="collapsed" href="#collapseOneBis">Collapsible Group Item #1</a>
	<div id="collapseOneBis" class="collapse">
		<ul class="list-unstyled">
			<li><a href="#" class="icon icon--before icon--cart">link with icon</a></li>
			<li><a href="#" class="icon icon--before icon--cart">link with icon</a></li>
			<li><a href="#" class="icon icon--before icon--cart">link with icon</a></li>
		</ul>
	</div>
	<a data-toggle="collapse" class="collapsed" href="#collapseTwoBis">Collapsible Group Item #2</a>
	<div id="collapseTwoBis" class="collapse">
		<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a
			bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
			raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
	</div>
	<a data-toggle="collapse" class="collapsed" href="#collapseThreeBis">Collapsible Group Item #3</a>
	<div id="collapseThreeBis" class="collapse">
		<p>Anim pariatur cliche reprehenderit, enim eiusmod high life accusamus terry richardson ad squid. 3 wolf moon officia aute, non cupidatat skateboard dolor brunch. Food truck quinoa nesciunt laborum eiusmod. Brunch 3 wolf moon tempor, sunt aliqua put a
			bird on it squid single-origin coffee nulla assumenda shoreditch et. Nihil anim keffiyeh helvetica, craft beer labore wes anderson cred nesciunt sapiente ea proident. Ad vegan excepteur butcher vice lomo. Leggings occaecat craft beer farm-to-table,
			raw denim aesthetic synth nesciunt you probably haven't heard of them accusamus labore sustainable VHS.</p>
	</div>
</div>

Navigation

Search

Content containers

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.