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.
The focus teaser contains two to four articles selected by the editorial team and of topical interest which are to be placed in a prominent position. The position of the focus teaser is normally at the top of the home page. It consists of a large image, a headline, a brief teaser text, and a "more" link. The various topics are highlighted in turn in a slideshow presentation.
The user can choose a particular article via a tab, this automatically stops the slideshow until the user decided to play it again with the dedicated button. Hovering and focusing on the component will temporarily pause it, the slideshow is resumed once the focus/mouse leave the target.
On tablets and smartphones, the tab bar is replaced by a series of dots. In that particular case the slideshow never play automatically.
Please be careful about the length of the text in the tabs, the height is fixed.
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.
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.
Instead of the focus teaser, the "News" teaser can be used, in this case with only one article. This is the best solution if only a limited number of newsworthy items are presented on the home page and there is a low frequency of changes to the content of the home page.
The "News" teaser consists of a headline, a large image, a brief teaser text, and a "more" link.
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 a rotating carousel a topic can be presented from different perspectives. The various articles on the topic alternate automatically.
The carousel consists of various information blocks, each of which contains a large image, an optional small image, a brief teaser headline, a text, and a "more" link.
Accessibility issue
The carousel component is not totally compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.
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
The slideshow uses the jQuery plugin (Blueimp Bootstrap Image Gallery) to display images in fullscreen from the basic carousel. Be sure to add the correct layout before your </body> closing tag, as explained in the example below.
Accessibility issue
The slideshow component is not compliant with accessibility standards. If you need to be compliant, please consider other options for presenting your content.
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>
The dossier teaser is used to introduce topics on home pages or overview pages.
It consists of a 16:10 format image, the title of the topic, and a brief introductory text. Both the title and the image are linked to the appropriate page with a detailed presentation of the topic.
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>
In order to place particular emphasis on an individual topic, a maximum of one person teaser may be used on a home page. It is used, for example, on department web pages for a portrait of the responsible Federal Councillor.
Like the dossier teaser, the person teaser consists of a 16:10 format image, the title of the topic, and a brief introductory text. Both the title and the image are linked to the appropriate page with a detailed presentation of the topic. In addition, the teaser has a gray background.
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>
The publications preview is a very flexible teaser from a formal viewpoint.
It consists of an optional title, an optional image, an optional caption, and the text. The text can be wrapped round the image, starting on the right of the image.
Alternatively, this content element can be placed inside a gray info box.
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
In the news teaser, various snippets of news items are arranged chronologically. The user can use the scrollbar to scroll down the teaser and take a look at all of the news snippets that are available. Each snippet contains the date, the type of news item, and the link to the news story’s headline.
