Was macht die Komponente?
Ein Teaser ist eine Vorschau, der Nutzende neugierig machen und sie dazu anregen soll, auf weitere Inhalte oder Seiten zu klicken.
Wann soll die Komponente eingesetzt werden?
- Um Inhalte, Artikel, Produkte oder Dienstleistungen hervorzuheben und zu bewerben.
- Um Nutzende auf weiterführende Informationen oder interessante Inhalte aufmerksam zu machen.
Regeln
- Verwende eine prägnante und einladende Überschrift sowie eine kurze, interessante Beschreibung.
- Verwende nicht zu viele verschiedene Teaser-Arten- und Grössen auf einer Seite.
- Mehrere Teaser können mit einem Titel strukturiert werden.
Verwandte Komponenten
| Nummer | Typ | Beschreibung | Optional | Hinweis |
|---|---|---|---|---|
| 1 | Komponente | sbb-image | Nein | |
| 2 | Komponente | sbb-chip | Ja | |
| 3 | Text | Nein | ||
| 4 | Text | Link-Text | Nein |
Spielwiese
Beispiele
The sbb-teaser-hero is a component with a background image and an action call within a panel;
it should be an eye-catcher and should have an emotional effect on the user with its large image component.
Slots
It is possible to provide the panel label via an unnamed slot,
while the link text can be provided using the link-content slot or the linkContent property;
similarly, the background image can be provided using the image slot or the imageSrc property.
<sbb-teaser-hero
href="https://www.sbb.ch"
link-content="Find out more"
image-src="https://path-to-source"
image-alt="SBB CFF FFS Employee"
>
Break out and explore castles and palaces.
</sbb-teaser-hero>
<sbb-teaser-hero href="https://www.sbb.ch">
Break out and explore castles and palaces.
<sbb-image slot="image" image-src="https://path-to-source" alt="SBB CFF FFS Employee"></sbb-image>
<span slot="link-content">Find out more</span>
</sbb-teaser-hero>
Accessibility
The description text is wrapped into an p element to guarantee the semantic meaning.
Avoid slotting block elements (e.g. div) as this violates semantic rules and can have negative effects on screen readers.
Properties
| Name | Attribute | Privacy | Type | Default | Description |
|---|---|---|---|---|---|
imageAlt | image-alt | public | string | undefined | Image alt text will be passed to sbb-image. | |
imageSrc | image-src | public | string | undefined | Image src will be passed to sbb-image. | |
linkContent | link-content | public | string | undefined | Panel link text. |
Slots
| Name | Description |
|---|---|
| Use the unnamed slot to add text content to the panel | |
image | The background image that can be a sbb-image |
link-content | Link content of the panel |