Zur Navigation Zum Inhalt Kontakt Menu Trouver un composant Aperçu Lyne
Principes Bases Accessibilité Système de design Guidelines Deutsch Français Italiano English Nos principes de design Centré sur l’utilisateur Reconnaissable Inclusif Minimaliste Holistique Auto-explicatif Axé sur les tâches Approprié Portail de la marque CFF Logo Horloge numérique Droits d’utilisation Couleurs de base Couleurs fonctionnelles Couleurs off-brand Icônes Icônes de l’horaire Pictogrammes À propos de l’accessibilité À propos de ce guide Contact Informations complémentaires Product Owner User Research Interaction Design Visual Design Development Content Design Testing What is a design system? Conception Développer FAQ Aide Procès Contribution Contact Aperçu Base Composants Overview Releases Design Tokens Composants Roadmap Aperçu Base Informations Aperçu Base Composants Sens & objectif Community Assets Instructions Power-Apps Bandeaux publicitaires numériques SAP Icônes d’applications Flip-Card Info

Was macht die Komponente?

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.

Wann soll die Komponente eingesetzt werden?

  • Um Inhalt zu strukturieren.
  • Um Übersichtlichkeit zu gewährleisten/herzustellen.

Regeln

  • Titel und Bild sind zwingend
  • Der Detail-Text sollte nach Möglichkeit nicht zu lang sein, bzw. nur so lang, dass die Flip-Card nach dem Einblenden der Details nicht grösser werden muss.
Accordion Flip-Card-Details Flip-Card-Summary
Anatomie
Anatomie der Komponente
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
Demo Image After
Image Below
With Chip On Image
No Image
Long Content
Long Title
Grid
HTML in Zwischenablage kopiert.
Implementation

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>

Style

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>

Slots

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.

States

The sbb-flip-card will switch to the flipped state after the user clicks on it or after the toggle method is called.

Properties

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.

Methods

Name Privacy Description Parameters Return Inherited From
toggle public Toggles the state of the sbb-flip-card. void

Events

Name Type Description Inherited From
flip CustomEvent<void> Emits when the flip card flips.

Slots

Name Description
Use the unnamed slot to add a sbb-flip-card-summary and a sbb-flip-card-details element.
Trouver un composant

Lyne

  • Design Tokens
  • Animation
    Animation
  • Border
    Border
  • Breakpoint
    Breakpoint
  • Color
    Color
  • Layout
    Layout
  • Shadow
    Shadow
  • Size
    Size
  • Spacing
    Spacing
  • Typography
    Typography
  • Action
  • More Info
    Action-Group
  • More Info
    Block-Link
  • More Info
    Button
  • More Info
    Link
  • More Info
    Mini-Button-Group
  • More Info
    Secondary-Button
  • More Info
    Teaser
  • More Info
    Teaser-Hero
  • More Info
    Teaser-Product
  • More Info
    Teaser-Product-Static
  • More Info
    Accent-Button
  • More Info
    Transparent-Button
  • Brand
  • More Info
    Clock
  • More Info
    Logo
  • Collection
  • More Info
    Link-List
  • More Info
    Link-List-Anchor
  • More Info
    Paginator
  • More Info
    Compact-Paginator
  • More Info
    Skiplink-List
  • More Info
    Table-Wrapper
  • Form
  • More Info
    Autocomplete
  • More Info
    Autocomplete-Grid
  • More Info
    Calendar
  • More Info
    Checkbox
  • More Info
    Checkbox-Group
  • More Info
    Checkbox-Panel
  • More Info
    Datepicker
  • More Info
    File-Selector-Dropzone
  • More Info
    File-Selector
  • More Info
    Form-Field
  • More Info
    Radio-Button
  • More Info
    Radio-Button-Group
  • More Info
    Radio-Button-Panel
  • More Info
    Select
  • More Info
    Selection-Expansion-Panel
  • More Info
    Slider
  • More Info
    Toggle
  • More Info
    Toggle-Check
  • Indicator
  • More Info
    Alert
  • More Info
    Alert-Group
  • More Info
    Chip-Label
  • More Info
    Loading-Indicator
  • More Info
    Loading-Indicator-Circle
  • More Info
    Message
  • More Info
    Notification
  • More Info
    Status
  • More Info
    Stepper
  • More Info
    Tag-Group
  • More Info
    Toast
  • Layout
  • More Info
    Accordion
  • More Info
    Card
  • More Info
    Container
  • More Info
    Divider
  • More Info
    Footer
  • More Info
    Header
  • More Info
    Map-Container
  • More Info
    Title
  • Navigation
  • More Info
    Breadcrumb
  • More Info
    Breadcrumb-Group
  • More Info
    Menu
  • More Info
    Navigation
  • More Info
    Tab-Group
  • Overlay
  • More Info
    Dialog
  • More Info
    Overlay
  • More Info
    Popover
  • Time-Table
  • More Info
    Journey-Header
  • Visual asset
  • More Info
    Icon
  • More Info
    Image
Impressum Contact Protection des données Paramètres des cookies