Zur Navigation Zum Inhalt Kontakt Menu Find component Overview Lyne Principles Foundation Accessibility Design System Guidelines Deutsch Français Italiano English Our design principles User-centred Recognisable Inclusive Reduced Holistic Self-explanatory Task-oriented Appropriate SBB Brand portal Logo Digital clock Rights of use Base colors Functional colors Off brand colors Icons Timetable icons Pictograms About accessibility Über diesen Guide Contact Further information Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Designing Coding FAQ Help Process Contribution Contact Overview Base Components Overview Base Components Overview Base Components Overview Design Tokens Components Overview Base Informationen Sense & Purpose Community Assets Instructions Power-Apps Digital banner ads SAP Design Guidelines App Icons
Find component

Lyne

Basics Animation

Animation

Border

Border

Grid

Grid

Spacings

Spacings

Typography

Typography

Components Action-Group

Action-Group

Alert

Alert

Alert-Group

Alert-Group

Autocomplete

Autocomplete

Button

Button

Calendar

Calendar

Card

Card

Card-Badge

Card-Badge

Checkbox

Checkbox

Checkbox-Group

Checkbox-Group

Chip

Chip

Clock

Clock

Datepicker

Datepicker

Dialog

Dialog

Divider

Divider

Footer

Footer

Form-Error

Form-Error

Form-Field

Form-Field

Header

Header

Header-Action

Header-Action

Icon

Icon

Image

Image

Journey-Header

Journey-Header

Link

Link

Link-List

Link-List

Logo

Logo

Menu

Menu

Menu-Action

Menu-Action

Radio-Button

Radio-Button

Radio-Button-Group

Radio-Button-Group

Selection-Panel

Selection-Panel

Signet

Signet

Slider

Slider

Tab-Group

Tab-Group

Tab Title

Tab Title

Tag

Tag

Tag-Group

Tag-Group

Teaser

Teaser

Teaser-Hero

Teaser-Hero

Time-Input

Time-Input

Title

Title

Toggle

Toggle

Toggle-Check

Toggle-Check

Tooltip

Tooltip

Tooltip-Trigger

Tooltip-Trigger

Teaser Implementation

The sbb-teaser acts as a link containing an image next to a title and a description.
It's important to set the accessibilityLabel which describes the teaser for screenreader users.
The title level can be set by the consumer.

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.

Overview

Generalized Teaser - for displaying an image, title and paragraph

Properties

Property Attribute Description Type Default
href href The href value you want to link to. string undefined
isStacked is-stacked Teaser variant - when this is true the text-content will be under the image otherwise it will be displayed next to the image. boolean undefined
rel rel The relationship of the linked URL as space-separated link types. string undefined
target target Where to display the linked URL. string undefined
titleLevel title-level Heading level of the sbb-title element (e.g. h1-h6). "1" | "2" | "3" | "4" | "5" | "6" '5'

Slots

Slot Description
"description" Slot used to render the description
"image" Slot used to render the image
"title" Slot used to render the title

Dependencies

Depends on

Graph

graph TD;
sbb-teaser --> sbb-title
style sbb-teaser fill:#f9f,stroke:#333,stroke-width:4px

Demo
altThis is a titleThis is a paragraph
Yes No
White Milk Iron Charcoal Black
More examples on Storybook
Imprint Contact Cookie settings