# Flip-Card

Component of the SBB design system Lyne.

- Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Structure: main element with parts; use parts only within the element they belong to
- Categories: Container
- Status: Design guidelines complete

## Links

- Page on digital.sbb.ch: https://digital.sbb.ch/en/design-system/lyne/components/flip-card/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-flip-card--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/flip-card/overview (API: https://lyne-angular.app.sbb.ch/angular/components/flip-card/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-29
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/flip-card

## Elements

- `sbb-flip-card`: Displays an informative card that reveals more information upon being clicked.
  - `sbb-flip-card-details`, only within `sbb-flip-card`: Combined with a `sbb-flip-card`, it displays its content when the card is flipped.
  - `sbb-flip-card-summary`, only within `sbb-flip-card`: Combined with a `sbb-flip-card`, it displays its content when the card is not flipped.

## Related components

- Similar: [Accordion](https://digital.sbb.ch/en/design-system/lyne/components/accordion/index.md)

## Overview

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

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

## Implementation (web components)

#### sbb-flip-card

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

```html
<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](https://lyne-elements.app.sbb.ch/?path=/docs/elements-image--docs#utility-classes)).

```html
<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)`.

```html
<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.

## API (web components)

Full API tables (attributes, events, slots, CSS properties): https://digital.sbb.ch/en/design-system/lyne/components/flip-card/api.md