Inhaltsmodule, Inhaltscontainer, Richtlinien für das Webdesign Bund

Elemente-Liste

FLEX

Übersetzungen

Die Elemente-Liste ist vielfältig einsetzbar. Generell stellt sie eine Reihe unterschiedlicher Inhaltselement dar. Dies können verschiedenen Typs sein: Adressen Publikationen, Reden, Medienmitteilungen. Sie können mit und ohne Bild sein.

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>

Weiterführende Informationen

FLEX

Übersetzungen

Unterhalb des Inhalts einer Seite können weiterführende Informationen angezeigt werden. Sie haben den Zweck, Inhalte (z.B. Publikationen, News oder Links), welche mit dem besprochenen Inhalt in Zusammenhang steht aber nicht direkt im Text angesprochen und daher im Inhalt verlinkt werden, anzubieten. Diese Inhalte werden mit Reitern geordnet.

Es handelt sich hierbei um eine spezifische Ausprägung der horizontalen Tab-Navigation. Es können bis zu fünf Tabs belegt werden. Die Bezeichnung der Tabs ist nicht vorgegeben. Innerhalb einer Website muss diese aber einheitlich (immer gleich) verwendet werden. Beispiele sind "Dokumente", "Publikationen", "Dienstleistungen", "Rechtliche Grundlagen", "Links", "News" 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>

Klapp-Box

FLEX

3.2.0

remove accordion behavior to make it keyboard accessible

3.1.0

keyboard accessibility fixed

Die Klapp-Box ist ein interaktives Element, in dem sich andere interaktive Elemente oder sonstige Inhalte verbergen. Es ist standardmässig geschlossen. Durch einen Klick wird die Box geöffnet, und die Inhalte werden sichtbar. Mit einem weiteren Klick kann die Box wieder geschlossen werden.

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

Suche

Inhaltscontainer

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Lorem ipsum dolor sit amet, consectetur adipisicing elit.