Teaser

Focus

FLEX

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.

image description

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.

An external link

image description

Nam voluptate minima libero cumque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quod id natus nesciunt atque tempore commodi fugiat dolorum porro.

An external link

image description

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.

An external link

image description

Lorem ipsum dolor sit.

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.

An external link

Focus vertical

FLEX

The vertical focus teaser is similar to the normal focus teaser. However, the tabs are arranged vertically.

Please be careful about the length of the text in the tabs, the height is fixed.

image description

Voluptates mollitia, consequuntur dignissimos maiores quasi?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptates mollitia, consequuntur dignissimos maiores quasi? Necessitatibus autem quisquam ..

An external link

image description

Nam voluptate minima libero cumque.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Minus quod id natus nesciunt atque tempore commodi fugiat dolorum porro.

An external link

image description

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.

An external link

image description

Lorem ipsum dolor sit.

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.

An external link

News

FLEX

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.

image description

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.


An external link

The teaser title line makes it possible to provide a teaser with an additional headline or to arrange several teasers in a group.

The title line consists of a headline, an optional link to related topics, and a line 2 pixels in height.

Themes

all

Image description

Title in H3

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.


An external link

Image description

Title in H3

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.


An external link

Image description

Title in H3

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Piso, familiaris noster, et alia multa et hoc loco Stoicos irridebat: Quid enim? Nihilo beatiorem esse.


An external link

Slideshow

FLEX

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

The text teaser is a simple element which is usually used in lists. It consists of a headline with a link and a short text.

Title in H3

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.

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.

Dossier teasers can be grouped with a title line.

Image description

Title in H3

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.

Person teaser

FLEX

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.

Image description

Title in H3

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.

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.

all
Publication's title : Lorem ipsum dolor sit amet
image description

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
image description

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
image description

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.

News feed

FLEX

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.

An RSS feed is a very specialized teaser with which only RSS feeds can be accessed.

The title always consists of an RSS icon and the letters “RSS”. A list of links can be found below this.

Twitter Timeline

FLEX

A Twitter timeline displays recent tweets of a specific Twitter user.

The HTML tag data-profile defines the Twitter user. data-tweet-limit optionally defines the maximum amount of displayed tweets.

Timeline

Timeline (Tweet Limit: 2)

Timeline (Tweet Limit: 1)

Timeline (Tweet Limit: 0)