sbb-card component is a generic content container; its task is to contain content related to a single subject.
There are various sizes (affecting paddings) and colors available.
<sbb-card size="xl" color="milk">
Card With Badge
sbb-card-badge component can be used to display a badge in the upper right corner.
The badge is hidden with card sizes
<sbb-card size="m" color="white">
Card With Action
To add an action to a card, add a
<sbb-card-action> to the main slot. With the
all the card area becomes clickable.
For API details see the
<sbb-card-action href="https://www.sbb.ch">Check all the wonderful trips available.</sbb-card-action>
It's important that a descriptive message is being slotted into the unnamed slot of
as it is used for search engines and screen reader users. E.g.
<sbb-card-action>Buy a half-fare ticket now</sbb-card-action>.
<sbb-card> should be a single action, however it's possible to place other interactive elements
in the card content. Interactive content will automatically be detected and made accessible to click / focus.
In cases where there should be only a visual button or link inside the card content without a different action, the
is-static attribute should be set (e.g.
Windows High Contrast Notes
In high contrast mode, all the content of a link or a button receives a specific color which overrides every other color.
However, as the content of the card is not directly inside the button or link, this does not happen
when the slotted content has a specific color set.
To improve coloring, it's needed to manually define styles for windows high contrast mode (setting
| || ||Option to set the component's background color.|| || |
| || ||Size variant, either xs, s, m, l, xl, xxl or xxxl.|| || |
| ||Slot to render |
| ||Slot to render the content.|
sbb-timetable-row --> sbb-card
style sbb-card fill:#f9f,stroke:#333,stroke-width:4px