The 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 content
</sbb-card>Card With Badge
The sbb-card-badge component can be used to display a badge in the upper right corner.
The badge is hidden with card sizes xs or s.
<sbb-card size="m" color="white">
<sbb-card-badge>
<span>%</span>
<span>from CHF</span>
<span>19.99</span>
</sbb-card-badge>
Card content
</sbb-card>Card With Action
To add an action to a card, add a <sbb-card-action> to the main slot. With the <sbb-card-action>
all the card area becomes clickable.
For API details see the sbb-card-action docs.
<sbb-card>
<sbb-card-action href="https://www.sbb.ch">Check all the wonderful trips available.</sbb-card-action>
Buy trips
</sbb-card>Accessibility
It's important that a descriptive message is being slotted into the unnamed slot of <sbb-card-action>
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>.
Normally, a <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. <sbb-button is-static></sbb-button>).
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 LinkText or ButtonText).
Properties
| Property | Attribute | Description | Type | Default |
|---|---|---|---|---|
color | color | Option to set the component's background color. | "milk" | "transparent-bordered" | "transparent-bordered-dashed" | "white" | 'white' |
size | size | Size variant, either xs, s, m, l, xl, xxl or xxxl. | "l" | "m" | "s" | "xl" | "xs" | "xxl" | "xxxl" | 'm' |
Slots
| Slot | Description |
|---|---|
"badge" | Slot to render <sbb-card-badge>. |
"unnamed" | Slot to render the content. |
Dependencies
Used by
Graph
graph TD;
sbb-timetable-row --> sbb-card
style sbb-card fill:#f9f,stroke:#333,stroke-width:4pxInteraktiv
Statisch