# Teaser-Hero

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Action
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/teaser-hero/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-teaser-hero--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/teaser-hero/overview (API: https://lyne-angular.app.sbb.ch/angular/components/teaser-hero/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=31104-491033
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/teaser-hero

## Elemente

- `sbb-teaser-hero`: It displays an image and an action call within a panel.

## Verwandte Komponenten

- Ähnlich: [Teaser](https://digital.sbb.ch/de/design-system/lyne/components/teaser/index.md), [Teaser-Panel](https://digital.sbb.ch/de/design-system/lyne/components/teaser-panel/index.md), [Teaser-Product](https://digital.sbb.ch/de/design-system/lyne/components/teaser-product/index.md)

## Übersicht

### Was macht die Komponente?
Der Teaser-Hero zeigt ein grosses Bild mit einem roten Panel, das einen kurzen Text und einen Link enthält. Er soll auffallen und emotional wirken.

### Wann soll die Komponente eingesetzt werden?
* Um ein Thema, Produkt oder eine Dienstleistung prominent mit einem starken Bild zu bewerben.
* Als Einstieg zu weiterführenden Inhalten oder Seiten.

### Regeln.
* Das Bild unterstützt die Botschaft und ist hochwertig und emotional.
* Der Text im Panel ist kurz und einladend. Der Link beschreibt das Ziel.
* Im Panel keine Block-Elemente (z.B. `div`) verwenden, damit die Semantik für Screenreader stimmt.
* Nicht mehrere Hero-Teaser direkt untereinander oder neben anderen Teaser-Arten platzieren.

## Implementation (Web Components, Englisch)

The `<sbb-teaser-hero>` is a component with a background image and an action call within a panel;
it should be an eye-catcher and should have an emotional effect on the user with its large image component.

### Slots

It is possible to provide the panel label via an unnamed slot,
while the link text can be provided using the `link-content` slot or the `linkContent` property;

Use the `image` slot to pass an `<sbb-image>` or an `img` that will be used as background.

```html
<sbb-teaser-hero href="https://www.sbb.ch">
  Break out and explore castles and palaces.
  <span slot="link-content">Find out more</span>
  <sbb-image slot="image" image-src="https://path-to-source" alt="SBB CFF FFS Employee"></sbb-image>
</sbb-teaser-hero>
```

Optionally, you can add an overlapping `<sbb-chip-label>` or image (e.g. logo) 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)).
If the `<sbb-chip-label>` or the image (e.g. logo) should appear on top of the red panel (e.g. on small screens),
you need to set a `z-index` on the `<sbb-chip-label>` or the image (e.g. logo).
Otherwise, it stays behind the red panel.

```html
<sbb-teaser-hero href="https://www.sbb.ch">
  Break out and explore castles and palaces.
  <span slot="link-content">Find out more</span>
  <figure slot="image" class="sbb-figure">
    <sbb-image image-src="https://path-to-source" alt="SBB CFF FFS Employee"></sbb-image>
    <sbb-chip-label class="sbb-figure-overlap-start-start" style="z-index: 1">
      Chip label
    </sbb-chip-label>
    <img
      class="sbb-figure-overlap-image sbb-figure-overlap-end-end"
      src="logo.png"
      alt="Logo"
      style="z-index: 1"
    />
  </figure>
</sbb-teaser-hero>
```

### Accessibility

The description text is wrapped into an `p` element to guarantee the semantic meaning.

Avoid slotting block elements (e.g. `div`) as this violates semantic rules and can have negative effects on screen readers.

## API (Web Components, Englisch)

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