What does the component do?
A teaser is a preview that is intended to arouse users' curiosity and encourage them to click on further content or pages.
When should the component be used?
- To highlight and promote content, articles, products or services.
- To make users aware of further information or interesting content.
Rules
- Use a catchy and inviting headline and a short, interesting description.
- Do not use too many different teaser types and sizes on one page.
- Several teasers can be structured with one title.
Sibling Components
| Number | Type | Description | Optional | Info |
|---|---|---|---|---|
| 1 | Component | sbb-image | No | |
| 2 | Component | sbb-chip | Yes |
Examples
The sbb-teaser-paid is a component with a background image and a chip with a text.
<sbb-teaser-paid>
<sbb-chip slot="chip">Label</sbb-chip>
<sbb-image slot="image" image-src="https://path-to-source" alt="SBB CFF FFS Employee"></sbb-image>
</sbb-teaser-paid>
Slots
The sbb-teaser-paid component has two slots: the image slot, used to slot an sbb-image and the chip slot, used to slot an sbb-chip.
Slots
| Name | Description |
|---|---|
chip | Link content of the panel |
image | The background image that can be a sbb-image |