Versteckt Inhalt (Text und Links) hinter einem Titel und einem Bild. Mit einem Klick auf die Flip-Card kann der dazugehörige Inhalt ein- und ausgeblendet werden.
Nummer | Typ | Beschreibung | Optional | Hinweis |
---|---|---|---|---|
1 | Komponente | sbb-flip-card-summary | Nein | |
1a | Komponente | sbb-title | Nein | |
1b | Komponente | sbb-image | Nein | |
1c | Komponente | sbb-secondary-button | Nein | Open-Action |
2 | Komponente | sbb-flip-card-details | Nein | |
2a | Text | Slot | Nein | |
2b | Komponente | sbb-link | Ja | |
2c | Komponente | sbb-secondary-button | Nein | Close-Action |
The sbb-flip-card
component displays an informative card that reveals more informations when clicked or toggled programmatically.
It's meant to be used together with sbb-flip-card-summary and sbb-flip-card-details.
<sbb-flip-card>
<sbb-flip-card-summary>
<sbb-title> Card Title </sbb-title>
<sbb-image slot="image" image-src="..." alt="..."></sbb-image>
</sbb-flip-card-summary>
<sbb-flip-card-details> Some additional text. </sbb-flip-card-details>
</sbb-flip-card>
The sbb-flip-card
component has a predefined minimum height that can be customized by specifying the min-height
property directly in the style of the host element with a custom height. Alternatively, when used within a CSS grid layout alongside other cards, the height can be adjusted using the grid-template-rows
property. For consistent behavior and flexibility, it is recommended to use the minmax()
function, for example: grid-template-rows: minmax(320px, 1fr)
.
<div
style="display: grid; grid-template-rows: minmax(320px, 1fr); grid-template-columns: repeat(2, 1fr);"
>
<sbb-flip-card>
<sbb-flip-card-summary>
<sbb-title> Card Title </sbb-title>
<sbb-image slot="image" image-src="..." alt="..."></sbb-image>
</sbb-flip-card-summary>
<sbb-flip-card-details> Some additional text. </sbb-flip-card-details>
</sbb-flip-card>
<sbb-flip-card>
<sbb-flip-card-summary>
<sbb-title> Card Title </sbb-title>
<sbb-image slot="image" image-src="..." alt="..."></sbb-image>
</sbb-flip-card-summary>
<sbb-flip-card-details> Some additional text. </sbb-flip-card-details>
</sbb-flip-card>
</div>
The component will display the content slotted in the summary
slot in the main view, and the content slotted inside the details
slot after the card has been flipped.
The sbb-flip-card
will switch to the flipped state after the user clicks on it or after the toggle
method is called.
Name | Attribute | Privacy | Type | Default | Description |
---|---|---|---|---|---|
accessibilityLabel | accessibility-label | public | string | '' | This will be forwarded as aria-label to the action in the non flipped state. If not set, the textContent of the sbb-flip-card-summary is taken. |
details | - | public | SbbFlipCardDetailsElement | null | Returns the slotted sbb-flip-card-details. | |
isFlipped | - | public | boolean | Whether the flip card is flipped. | |
summary | - | public | SbbFlipCardSummaryElement | null | Returns the slotted sbb-flip-card-summary. |
Name | Privacy | Description | Parameters | Return | Inherited From |
---|---|---|---|---|---|
toggle | public | Toggles the state of the sbb-flip-card. | void |
Name | Type | Description | Inherited From |
---|---|---|---|
flip | CustomEvent<void> | Emits when the flip card flips. |
Name | Description |
---|---|
Use the unnamed slot to add a sbb-flip-card-summary and a sbb-flip-card-details element. |