# Flip-Card

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: Hauptelement mit Bestandteilen; Bestandteile nur innerhalb des jeweiligen Elements verwenden
- Kategorien: Container
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/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

## Elemente

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

## Verwandte Komponenten

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

## Übersicht

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

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

## Implementation (Web Components, Englisch)

#### 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, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/flip-card/api.md