Improved accessibility by moving tabs before content without changing visual presentation
Add aria-label on nagivation buttons on carousel fallback in mobile mode
3.0.0
Improved accessibility by pausing the slideshow when user interact with the component and also by adding a play/pause button.
Der Brennpunkte-Teaser umfasst zwei bis vier redaktionell ausgewählte und aktuelle Beiträge, die prominent platziert werden sollen. Der Brennpunkt-Teaser steht im Normalfall auf der Startseite zuoberst. Er besteht aus einem grossen Bild, einem Titel, einem kurzen Teaser-Text und einem weiterführenden Link. Die Anzeige wechselt automatisch zwischen den gewählten Beiträgen. Der Anwender kann über eine Reiter-Leiste einen bestimmten Beitrag auswählen; der automatische Wechsel wird dadurch unterbrochen. Er wird ebenfalls unterbrochen, wenn der User den Start-/Stopp-Button oben links im Bild clickt, die Maus in den Teaser-Container bewegt (hover) oder diesen mittels der Tastatur ansteuert (Fokus). Beim Verlassen des Teasers (Maus/Fokus) setzt der automatische Wechsel wieder ein.
Auf Tablets und Smartphones wird die Reiterleiste durch eine Reihe von Punkten ersetzt.
Achtung:
Bitte Text- und Wortlänge beachten. Die Höhe des Teasers ist fest definiert.
*** Accessibility
Das Titelformat H4 in den Teaser-Beispielen ist keine allgemeine Vorgabe. Das Format H1, H2, H3 etc. richtet sich nach der Gewichtung des Titels in der Struktur der <section> oder der Seite.
Voluptates mollitia, consequuntur dignissimos maiores quasi?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia, consequuntur dignissimos maiores quasi? Necessitatibus autem quisquam mollitia modi porro, libero totam. Vero ipsum iste labore, tempora optio, modi dolores.
Lorem ipsum dolor sit amet, consectetur adipisicing elit.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloremque non asperiores itaque illo maxime, voluptatibus deserunt natus assumenda. In rem iste error cupiditate adipisci, qui quaerat! Magni quis reiciendis laborum dolores provident voluptatibus
sequi, architecto necessitatibus assumenda delectus incidunt itaque expedita minima deserunt at, soluta ratione hic error ipsam fugit ducimus.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe expedita reiciendis, aspernatur ad, fugit voluptate, officia possimus atque hic consequatur ut earum facilis omnis dolorem iusto! Reprehenderit, similique itaque, dolorem quam
veritatis eaque ab consequatur tempore ullam deleniti explicabo.
Improved accessibility by moving tabs before content without changing visual presentation
Add aria-label on nagivation buttons on carousel fallback in mobile mode
3.1.0
Focus vertical introduced
Der vertikale Brennpunkte-Teaser gleicht dem normalen Teaser. Allerdings die Reiterleisten vertikal angeordnet.
Achtung:
Bitte Text- und Wortlänge beachten. Die Höhe des Teasers ist fest definiert.
*** Accessibility
Das Titelformat H3 in den Teaser-Beispielen ist keine allgemeine Vorgabe. Das Format H1, H2, H3 etc. richtet sich nach der Gewichtung des Titels in der Struktur der <section> oder der Seite.
Voluptates mollitia, consequuntur dignissimos maiores quasi?
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia, consequuntur dignissimos maiores quasi? Necessitatibus autem quisquam ..
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum saepe expedita reiciendis, aspernatur ad, fugit voluptate, officia possimus atque hic consequatur ut earum facilis omnis dolorem iusto.
Anstelle des Brennpunkte-Teasers kann der Teaser Neuigkeiten mit nur einem Beitrag verwendet werden. Dies ist dann sinnvoll, wenn auf der Startseite nur wenige News geschaltet werden und die Frequenz der Änderungen tief ist.
Er besteht aus einem grossen Bild, einem kurzen Teaser-Text und einem weiterführenden Link. Allenfalls kann er mit einer Titelzeile versehen werden (siehe folgendes Element).
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse Metellum quam Regulum. Erit enim mecum, si tecum erit. Ne amores quidem
sanctos a sapiente alienos esse arbitrantur.
<div class="row">
<div class="col-sm-7">
<p>
<img src="http://placehold.it/588x368" alt="image description">
</p>
</div>
<div class="col-sm-5">
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum. Erit enim mecum, si tecum erit. Ne amores quidem
sanctos a sapiente alienos esse arbitrantur.
</p>
<br>
<a href="#" class="icon icon--after icon--external">An external link</a>
</div>
</div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse Metellum quam Regulum.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse Metellum quam Regulum. Erit enim mecum, si tecum erit. Ne amores quidem
sanctos a sapiente alienos esse arbitrantur.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse.
<div class="row">
<div class="col-sm-8">
<div class="list-group">
<div class="list-group-header">
<h3 class="pull-left">Themes</h3>
<a href="#" class="pull-right icon icon--before icon--list">all</a>
</div>
<div class="row">
<div class="col-sm-4">
<p>
<img src="http://placehold.it/282x176" alt="Image description">
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum.
</p>
<br>
<a href="#" class="icon icon--after icon--external">An external link</a>
</div>
<div class="col-sm-4">
<p>
<img src="http://placehold.it/282x176" alt="Image description">
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse <a href="#">Metellum</a> quam Regulum. Erit enim mecum, si tecum erit. Ne amores quidem
sanctos a sapiente alienos esse arbitrantur.
</p>
<br>
<a href="#" class="icon icon--after icon--external">An external link</a>
</div>
<div class="col-sm-4">
<p>
<img src="http://placehold.it/282x176" alt="Image description">
</p>
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse.
</p>
<br>
<a href="#" class="icon icon--after icon--external">An external link</a>
</div>
</div>
</div>
</div>
</div>
The carousel controls have been moved upper in the DOM to be the easily accessible with the keyboard.
2.5.1
put <figure> element after <h4> to avoid ungraceful alignment
In einem Karussell kann ein Thema aus verschiedenen Perspektiven dargestellt werden. Die verschiedenen Beiträge wechseln automatisch.
Das Karussell besteht aus verschiedenen Informationsblöcken, die jeweils in einem grossen Bild, einem optionalen kleinen Bild, einem kurzen Teaser-Titel, einem Text und einem weiterführenden Link zusammengesetzt sind.
Accessibility
Die Karussell-Komponente ist nicht barrierefrei. Wird sie verwendet, müssen die Inhalte auch in einer barrierefreien Form zugänglich gemacht werden.
switched order between the <small> and <div> elements inside of .carousel-controls container
removed .pull-right class to those same 2 elements
added .pull-right class to .carousel-controls element
In einer Slideshow kann eine thematisch zusammengehörende Gruppe von Bildern attraktiv dargestellt werden. Es gibt eine Blätter-Funktion, die erlaubt, von einem Bild zum nächsten zu wechseln. Die Slideshow nutzt das jQuery plugin (Blueimp Bootstrap Image Gallery), um die Bilder im Vollbildmodus anzuzeigen. Bitte beachten: Das korrekte Layout vor dem abschliessenden </body>-Tag einfügen (siehe untenstehendes Beispiel).
Accessibility
Die Slideshow-Komponente ist nicht barrierefrei. Wird sie verwendet, müssten die Inhalte auch in einer barrierefreien Form zugänglich gemacht werden.
Slideshow
Image Title
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus atque quas, dignissimos quo tempora, consectetur. Odio tempore nulla odit ab impedit dignissimos unde, alias error harum animi laboriosam repudiandae quaerat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
<div class="row">
<div class="col-sm-3">
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
</div>
</div>
Mit dem Dossier-Teaser werden Themen auf Startseiten oder Übersichtseiten eingeführt.
Er besteht aus einem Bild im 16:10-Format, dem Titel des Themas sowie einem kurzen Einleitungstext. Der Titel und das Bild verlinken auf die entsprechende Detailseite.
Dossier-Teaser können mit einer Titelzeile gruppiert werden. Dabei ist zu beachten, dass die Titel-Hierarchie auf der Seite accessibilitykonform bleibt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
<div class="row">
<div class="col-sm-3">
<img src="http://placehold.it/282x176" alt="Image description">
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
</div>
</div>
wrapped the .well element in <div class="bordered-well"></div>
Um ein Thema besonders hervorzuheben kann auf einer Startseite maximal ein Personen-Teaser verwendet werden. Er wird bei Departement-Seiten zum Beispiel für das Portrait des zuständigen Bundesrates verwendet.
Der Personen-Teaser besteht, wie der Dossier-Teaser, aus einem Bild im 16:10-Format, dem Titel des Themas sowie einem kurzen Einleitungstext. Der Titel und das Bild verlinken auf die entsprechende Detailseite. Zusätzlich ist der Teaser mit einer grauen Fläche hinterlegt.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
<div class="row">
<div class="col-sm-3">
<div class="bordered-well">
<img src="http://placehold.it/282x176" alt="Image description">
<div class="well">
<h3><a href="#">Title in H3</a></h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Utilitatis causa amicitia est quaesita. Deinde qui fit, ut ego nesciam, sciant omnes, quicumque Epicurei esse voluerunt? Ut in geometria, prima si dederis, danda sunt omnia. Sed mehercule pergrata.
</p>
<ul>
<li><a href="#">Link n°1</a></li>
<li><a href="#">Link n°2</a></li>
<li><a href="#">Link n°3</a></li>
</ul>
</div>
</div>
</div>
</div>
Die Publikationen-Vorschau ist ein formal sehr flexibler Teaser. Er besteht aus einem optionalen Titel, einem optionalen Bild, einer optionalen Bildlegende und dem Text. Der Text kann das Bild rechts umfliessen. Alternativ kann dieses Inhaltselement auch in eine graue Infobox verschachtelt werden.
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.
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.
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-3">
<!-- Publications list example -->
<div class="list-group news-feed">
<div class="list-group-header">
<a href="#" class="icon icon--before icon--list pull-right">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>
added the .news-feed class to the .list-group element
added the .scroll-y wrapper containing all the .list-group-item elements
Im News-Teaser werden verschiedene News-Anrisse chronologisch sortiert dargestellt. Mit einer Scrollbar kann der Anwender innerhalb des Teasers nach unten scrollen und somit alle angebotenen News-Anrisse sehen. Jeder Anriss beinhaltet das Datum, den Meldungstyp sowie den verlinkten Titel zur News.
added the .news-feed class to the .list-group element
added the .scroll-y wrapper containing all the .list-group-item elements
Eine Twitter-Timeline zeigt die neusten Tweets eines bestimmten Twitter-Benutzers.
Mit dem HTML-Tag data-profile wird der Twitter-Benutzer definiert. Mit data-tweet-limit kann die Anzahl anzuzeigender Tweets optional limitiert werden.
