Teasers are illustrated links to guide the user to its points of interest. A teaser is a combination of an asset or symbol and a text element both as the content of the link. The default teaser component can be used in various contexts and forms.

The image or video can be in the teasers background or side by side with the text. In the context of a carousel component the style and editing is a litte bit different.

An additional Link list can be filled within the teaser to decorate the teaser with links to related pages or interesting details.

Image / Video

A teaser with an image

the image should be on the left

the teaser text is shown on the right an not floating around the asset

the image claims 40% of the width on the left
no symbol is shown

A teaser with a video

the video should be on the left

the teaser text is shown on the right analogous to an image

/home/pages/components/teasers.html

Text only

A 'text only' teaser

the subtitle of the 'text only' teaser

a teaser without image or video and without a symbol in the default layout

shout be rendered as on link if no link list are in the teaser link set
if links are specified the teasers text block should be rendered as the teasers link
the link area of the teaser should be a drop zone for pages to define the teasers link

the 'text only' teaser

the 'text only' teaser with a link set

a teaser without image or video and without a symbol in the default layout with a link set

the teasers text block should be rendered as the teasers link

/home/pages/components/teasers.html

Symbols

A teaser with a symbol

no image or video - symbol is used

the symbol should be rendered at the left side; the text block is aligned left but on the right of the symbol

A teaser with a symbol

the symbol teaser with a link list

the link list declares an additional set of 'more' links

Components Teasers

A Teaser with an image as symbol

the image should be shown like a symbol

The symbol is placed on the left like a symbol but with more space on the left. Don't mix this with symbol teasers.

Another teaser with an image symbol

Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.