Whenever you want to create a content overview page or you simply need to link a group of articles, teaser components are the perfect choice. The Daimler design system offers a wide variety of teasers, from large, fullscreen ones to smaller, dynamic cards.
3.13.1.Large hero teaser
The large hero teaser is used as the first and most prominent element of a page. Use it to link the newest or most important article. There are three variants of this component:
Version 1: bold headline
Version 2: thin headline
Version 3: carousel with multiple images
The teaser grid allows you to link a lot of content in a compact and attractive fashion. The amount of teasers is flexible, the teaser grid will simply display more teaser cards. Each article is presented with a squared teaser image, a headline and a description text.
The arrangement and size of individual teasers can be adjusted by the editor. This way it's possible to create a nice and dynamic layout, no matter the number of teasers. The background of the module can also be set by the editor to match the content. Please note that the background image is optional, but the preferred visual variant. If necessary, an optional headline can be included as well.
Teaser grid with asymmetric layout.
Teaser grid with dark background
Teaser grid with headline.
Teaser grid with infographics as teaser images.
If a more structured and repetitive presentation of content is needed, you can choose from two additional teaser variants. The first is a simple two-column teaser grid, the second is a large graphical teaser list.
Two-column teaser grid
Single-column teaser grid.
Designs of the Teaser component are available for Sketch and integrated in the Daimler Design Kit. You can either copy paste them into your designs or use the Sketch file as a linked library and import the symbols.
See the Sketch Design Kit