Skip to main navigation Skip to main content Skip to page footer

Teaser

Es stehen verschiedene Teaser-Varianten zur Verfügung, die mit und ohne Bild verwendet werden können. 

Die Teaser-Varianten können untereinander beliebig kombiniert werden. Auch ist es möglich, Teaser mit Text-Komponenten, Linklisten oder anderen Elementen wie Accordions oder Headlines zu kombinieren.

Es können bis zu vier Teaser nebeneinander dargestellt werden. Hierbei aber bitte die verschiedenen Teaserarten beachten, da sich nicht alle Teaser beispielsweise für ein 6/6er-Grid eignen.

Teaser Typ1

Subheadline

Text

Button

Text Teaser ohne Bild

Subheadline

1

2

3

4

5

Linktext

Tiles Teaser

Subheadline

Dieser Button (quaternary) hat keinen Text

Button

Headline H4

Image mit Text und Button

Button

Text Teaser

Der Text Teaser kann mit oder ohne Bild verwendet werden. Mit Bild verwenden wir standardmäßig das 16:9-Format. Das Bild steht dabei immer über der farbigen Chatbox - eine Darstellung von Bild und Chatbox nebeneinander ist in dieser Komponente nicht möglich (Alternative siehe hier). Die Chatbox steht in allen Westenergie-Farben sowie transparent zur Verfügung.

Bei dieser Komponente kann ein Icon oder ein Button ausgewählt werden. 

Für diese Komponente eignet sich besonders ein 4/4/4- oder 3/3/3/3-Grid. Ein 6/6-Grid ist ebenfalls möglich - hier werden die Teaser jedoch etwas größer dargestellt.

Headline (H4)

Headlines können von H3-H5 gesetzt werden.

Zusätzlicher Text (optional)

Icon-Link (optional)

Headline (H5)

Headlines können von H3-H5 gesetzt werden.

tertiary

Headline (H3)

Headlines können von H3-H5 gesetzt werden.

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.

unten noch ein Button “quaternary”

Button

Text Teaser im 6/6er-Grid

Headline

Headlines können von H3-H5 gesetzt werden.

Zusätzlicher Text (optional)

 

Icon-Link (optional)

Headline (H5) (Kopie 1)

Headlines können von H3-H5 gesetzt werden.

Zusätzlicher Text (optional)

Button

Kombination vs. Text Teaser (beide mit H4)

Headline

Headlines können von H3-H5 gesetzt werden.

Zusätzlicher Text (optional)

 

Icon-Link (optional)

Headline (H5) (Kopie 3)

Headlines können von H3-H5 gesetzt werden.

Zusätzlicher Text (optional)

Button