Ein Teaser ist eine Vorschau, der Nutzende neugierig machen und sie dazu anregen soll, auf weitere Inhalte oder Seiten zu klicken.
Nummer | Typ | Beschreibung | Optional | Hinweis |
---|---|---|---|---|
1 | Komponente | sbb-image | Nein | |
2 | Komponente | sbb-chip | Ja | |
3 | Komponente | sbb-title | Nein | |
4 | Text | Subtext | Nein |
The sbb-teaser
is a component which can display an image with a caption, and it behaves like a link on user interaction.
Simple teaser example:
<sbb-teaser
href="https://www.sbb.ch"
title-level="2"
title-content="Title"
chip-content="Chip label"
>
<img slot="image" src="..." alt="400x300" />
A brief description.
</sbb-teaser>
The default slot is reserved for the description. The component displays the image
and the title
with the self-named slots.
It's also possible to display a sbb-chip using the chip
slot.
<sbb-teaser href="https://www.sbb.ch" title-level="2">
<img slot="image" src="..." alt="400x300" />
<span slot="chip">Chip label</span>
<span slot="title">Title</span>
A brief description.
</sbb-teaser>
Using the alignment
property, it is possible to change the text position respect to the image.
Possible values are after-centered
(default), after
and below
.
<sbb-teaser href="https://www.sbb.ch" aligment="below"> ... </sbb-teaser>
By default, the image dimensions are set using the width and the aspect ratio.
Default values are 300px
and 4/3
. Consumers can change these values on their slotted image element.
It's important to set the aria-label
on the <sbb-teaser>
, which describes the sbb-teaser
for screen-reader users.
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.
Name | Attribute | Privacy | Type | Default | Description |
---|---|---|---|---|---|
accessibilityLabel | accessibility-label | public | string | undefined | This will be forwarded as aria-label to the inner anchor element. | |
alignment | alignment | public | 'after-centered' | 'after' | 'below' | 'after-centered' | Teaser variant - define the position and the alignment of the text block. |
chipContent | chip-content | public | string | undefined | Content of chip. | |
download | download | public | boolean | undefined | Whether the browser will show the download dialog on click. | |
href | href | public | string | undefined | The href value you want to link to. | |
rel | rel | public | string | undefined | The relationship of the linked URL as space-separated link types. | |
target | target | public | LinkTargetType | string | undefined | Where to display the linked URL. | |
titleContent | title-content | public | string | undefined | Content of title. | |
titleLevel | title-level | public | SbbTitleLevel | '5' | Heading level of the sbb-title element (e.g. h1-h6). |
Name | Description |
---|---|
Use the unnamed slot to render the description. | |
chip | Slot used to render the sbb-chip label. |
image | Slot used to render the image. |
title | Slot used to render the title. |