Vorschau.

Was macht die Komponente?

Eine Flip-Card ist eine Karte mit Titel und Bild. Mit einem Klick dreht sie sich um und zeigt weiterführende Informationen mit Text und Links.

Wann soll die Komponente eingesetzt werden?

• Um eine Auswahl an Themen als Karten anzubieten, zu denen es kurze Zusatzinformationen gibt.
• Um Inhalte kompakt darzustellen, wenn die Details nicht sofort sichtbar sein müssen.

Ähnliche Komponente.

Regeln.

• Titel und Bild sind zwingend.
• Der Detail-Text ist kurz. Die Karte darf beim Umdrehen nicht grösser werden.
• Wichtige Informationen stehen nicht nur auf der Rückseite.
• Mehrere Flip-Cards nebeneinander haben dieselbe Höhe.

Elemente.

Diese Komponente besteht aus einem Hauptelement und seinen Bestandteilen. Die Bestandteile nur innerhalb des jeweiligen Elements verwenden.

• sbb-flip-card

  Bestandteile – nur innerhalb von sbb-flip-card:

  • sbb-flip-card-details
  • sbb-flip-card-summary

Spezifikation.

Web Components.

Die Web Component ist im Paket @sbb-esta/lyne-elements enthalten.

Dokumentation.

sbb-flip-card.

The <sbb-flip-card> component displays an informative card that reveals more information when clicked or toggled programmatically.

<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>

With the <sbb-flip-card-summary> you can optionally add an overlapping <sbb-chip-label> by wrapping the
<sbb-image> in a figure tag (see sbb-image doc).

<sbb-flip-card>
  <sbb-flip-card-summary>
    ...
    <figure class="sbb-figure" slot="image">
      <sbb-image
        image-src="https://cdn.img.sbb.ch/content/dam/internet/externe-assets/lyne/Bahnhof-Luzern.jpg"
        alt="Station of Lucerne from outside"
      ></sbb-image>
      <sbb-chip-label class="sbb-figure-overlap-start-start">...</sbb-chip-label>
    </figure>
  </sbb-flip-card-summary>
</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.

Angular.

Diese Komponente gibt es auch für Angular im Paket @sbb-esta/lyne-angular.

class: SbbFlipCardDetailsElement, sbb-flip-card-details.

Slots.

class: SbbFlipCardElement, sbb-flip-card.

Properties.

Methods.

Events.

Slots.

class: SbbFlipCardSummaryElement, sbb-flip-card-summary.

Properties.

Slots.