Teasers

Desktop

News teasers

News teasers display the most important news with an image, date, headline, and short text in four columns next to each other.

The alternative version with a large image and body copy on the hero section is suitable for displaying more than four news items. The vertical indicator is used for reference and as an alternative method of navigation between messages.

Due to their width, teaser lists make it possible to display longer body copy.

Image teasers
Image teasers with text boxes are available in two viewport widths: large/small and medium/medium.

With large/small teasers, the images are eight and four grid columns wide, with medium/medium teasers six grid columns wide. On hover, a box with a brief message and a link to further information about the image is displayed.

Full-bleed teasers
A full-bleed teaser can be used to particularly emphasize a piece of information.

The background area extends over the entire width of the browser and always appears in tints of Black. The image is eight grid columns wide, the text four.

Only hero shots (cut-out images on a neutral background) may be used. Only one full-bleed teaser can be used per page.

Info boxes

Info boxes can be used to highlight written information. Info boxes can be used with the background colors Smart Green, Black or tints of Black.

If there are no activating elements in the specific digital application, Info Boxes or Eye catcher may be used in any color, that is available.”

For more information about LINK

Image and text teasers
Image and text teasers in the content area of desktop applications are used to indicate additional content.

If possible, different teasers should be used within one page. When using teasers of the same type, you should ensure that the image positions are different in order to make the page look more interesting. You also have the option of using cut-out images.

There are two types of image and text teasers: For large/small teasers, the image width is eight and the text width four grid columns. With medium/medium teasers, the image and text are each six grid columns wide. In this context, you can position the image and text either to the left or to the right.

Image teasers
Image teasers with text boxes are available in two viewport widths: large/small and medium/medium.

With large/small teasers, the images are eight and four grid columns wide, with medium/medium teasers six grid columns wide. On hover, a box with a brief message and a link to further information about the image is displayed.

Full-bleed teasers
A full-bleed teaser can be used to particularly emphasize a piece of information.

The background area extends over the entire width of the browser and always appears in tints of Black. The image is eight grid columns wide, the text four.

Only hero shots (cut-out images on a neutral background) may be used. Only one full-bleed teaser can be used per page.

Info boxes

Info boxes can be used to highlight written information. Info boxes can be used with the background colors Smart Green, Black or tints of Black.

If there are no activating elements in the specific digital application, Info Boxes or Eye catcher may be used in any color, that is available.”

For more information about LINK

Mobile

Teasers in mobile applications are positioned in the column grid and arranged one below the other. Alternatively, teaser sliders can be used (see LINK)