Flip-Card. Overview

Preview.

Bahnhof Luzern Der Bahnhof Luzern ist einer der grössten Bahnhöfe der Schweiz.

What does the component do?

A flip card is a card with a title and an image. When clicked, it flips and shows further information with text and links.

When should the component be used?

  • To offer a selection of topics as cards, each with short additional information.
  • To present content compactly when the details do not need to be visible right away.

Similar component.

Accordion Usage

Rules.

  • Title and image are mandatory.
  • The detail text is short. The card must not grow when flipped.
  • Important information is not only on the back.
  • Several flip cards side by side have the same height.

Elements.

This component consists of a main element and its parts. Use the parts only within the element they belong to.

  • sbb-flip-card

    Parts – only within sbb-flip-card:

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

Specification.

Open in Figma
Examples Image After.
Try it out on Storybook Show HTML
Image Below.
Try it out on Storybook Show HTML
With Chip On Image.
Try it out on Storybook Show HTML
No Image.
Try it out on Storybook Show HTML
Long Content.
Try it out on Storybook Show HTML
Long Title.
Try it out on Storybook Show HTML
Grid.
Try it out on Storybook Show HTML
Copy HTML to clipboard. Implementation

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Storybook with live examples Source code on GitHub

Documentation.

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.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

Angular overview Angular API Angular examples API

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

Slots.

Name Description
Use the unnamed slot to provide any kind of content.

class: SbbFlipCardElement, sbb-flip-card.

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 Event Emits whenever the component is flipped.

Slots.

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

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

Properties.

Name Attribute Privacy Type Default Description
imageAlignment image-alignment public 'after' | 'below' 'after' The position where to render the image.

Slots.

Name Description
Use the unnamed slot to provide a title for the sbb-flip-card-summary.
image Use this slot to provide an image for the sbb-flip-card-summary.