Modules de contenu, Conteneurs, Lignes directrices pour le design web de la Confédération

Liste d’éléments

FLEX

Traductions

La liste d’éléments est utilisable de manière polyvalente. En général, elle représente un certain nombre d’éléments de contenu différents. Il peut s’agir de divers types: des adresses, publications, discours, communiqués de presse. Ils peuvent être dotés d’images ou non.

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>

Informations complémentaires

FLEX

Traductions

En-dessous du contenu d’une page, des informations complémentaires peuvent être affichées. Elles ont pour but de proposer des contenus (p. ex. des publications, actualités ou liens) qui sont en rapport avec le contenu mais qui ne sont pas directement abordés dans le texte et donc pas munies d’un lien. Ces contenus sont rangés dans des onglets.

Il s’agit ici d’une forme spécifique de la navigation horizontale par onglets. On peut utiliser jusqu’à cinq onglets. La désignation des onglets n’est pas prédéterminée. Cependant, à l’intérieur d’un site Internet, celle-ci doit être utilisée de manière uniforme (toujours identique). Par exemple «Documents», «Publications», «Services», «Principes juridiques», «Liens», «Actualités», etc.

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>

Encadré rétractable

FLEX

3.2.0

retrait du comportement d'accordéon pour rendre le composant accessible au clavier

3.1.0

correction d'accessibilité au clavier

L’encadré rétractable est un élément interactif à l’intérieur duquel se cachent d’autres éléments interactifs ou d’autres contenus. Par défaut, il est fermé. Un clic permet d’ouvrir l’encadré afin de rendre les contenus visibles. Un autre clic permet de refermer l’encadré.

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

Chercher

Conteneurs

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.