# Teaser-Product

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-product/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-teaser-product--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/teaser-product/overview (API: https://lyne-angular.app.sbb.ch/angular/components/teaser-product/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=31104-491035
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/teaser-product

## Elemente

- `sbb-teaser-product` (auch als `sbb-teaser-product-static`): Displays a text and a footnote, combined with an image, to tease a product

## Verwandte Komponenten

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

## Übersicht

### Was macht die Komponente?
Der Teaser-Product bewirbt ein Produkt mit Text und optionaler Fussnote auf einem Bild. Auf kleinen Bildschirmen folgt der Inhalt dem Bild. Es gibt zwei Varianten:
* Teaser-Product: Die ganze Fläche ist klickbar und führt zu einem Ziel.
* Teaser-Product-Static: Die Fläche ist nicht klickbar. Nur die darin enthaltenen Elemente, zum Beispiel Buttons oder Links, sind interaktiv.

### Wann soll die Komponente eingesetzt werden?
* Um ein Produkt oder eine Dienstleistung mit Bild hervorzuheben und zur Produktseite zu führen.
* Wenn der Text länger sein darf als beim [einfachen Teaser](https://digital.sbb.ch/de/design-system/lyne/components/teaser/), z.B. mit Titel und Fussnote.
* Der Teaser-Product-Static eignet sich, wenn nicht die ganze Fläche klickbar sein soll oder es mehr als eine Aktion gibt.

### Regeln.
* Verwende eine prägnante Überschrift und eine kurze Beschreibung.
* Der Teaser-Product ist als Ganzes interaktiv. Um das visuell zu unterstützen, kann ein statischer Button (nicht interaktiv) hinzugefügt werden.
* Bei mehr als einer Aktion verwende den Teaser-Product-Static.
* Setze beim Teaser-Product ein `accessibilityLabel`, das den Link für Screenreader beschreibt.
* Verwende nicht zu viele verschiedene Teaser-Arten und -Grössen auf einer Seite.

## Implementation (Web Components, Englisch)

The `<sbb-teaser-product>` is a component that can display a text and a footnote, combined with an image as background, to tease a product.
The whole component behaves like a link, and it is clickable; on small screens, the content follows the image.

The component can have at most a single interactive element in its static version (e.g. `<sbb-button-static>`).
If it has to include more than one interactive element, use the `<sbb-teaser-product-static>` element instead.

```html
<sbb-teaser-product href="...">
  <sbb-image slot="image" image-src="..."></sbb-image>

  <p class="sbb-teaser-product--spacing">Content ...</p>

  <p slot="footnote" class="sbb-teaser-product--spacing">...</p>
</sbb-teaser-product>
```

### Slots

Use the `image` slot to pass an `<sbb-image>` or an `img` that will be used as background.
Optionally, you can 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)).

Use the optional `footnote` slot to add a text anchored to the bottom-end of the component.

The default slot is reserved for the main content: it could be a simple text or a text combined with more elements,
like the `<sbb-title>` or an interactive element, like a button or a link (needs to be in static variant!).

```html
<sbb-teaser-product href="...">
  <figure slot="image" class="sbb-figure">
    <sbb-image image-src="..."></sbb-image>
    <sbb-chip-label class="sbb-figure-overlap-start-start">Chip label</sbb-chip-label>
  </figure>

  <p class="sbb-teaser-product--spacing">Content ...</p>
</sbb-teaser-product>
```

If paragraphs, title and/or button are used, consumers can apply the helper class `sbb-teaser-product--spacing`
to display the components with the correct spacings.

```html
<sbb-teaser-product href="...">
  <sbb-image slot="image" image-src="..."></sbb-image>
  <sbb-title level="3" class="sbb-teaser-product--spacing">
    Benefit from up to 70% discount
  </sbb-title>
  <p class="sbb-teaser-product--spacing">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium felis sit amet felis
    viverra lacinia. Donec et enim mi. Aliquam erat volutpat. Proin ut odio tellus.
  </p>
  <sbb-button-static class="sbb-teaser-product--spacing" size="l">Label</sbb-button-static>
</sbb-teaser-product>
```

### Style

Use the `image-alignment` attribute to anchor the content `after` (on the left) or `before` (on the right).

```html
<sbb-teaser-product image-alignment="before"> ... </sbb-teaser-product>
```

Add the `negative` attribute to enable the negative variant.

```html
<sbb-teaser-product negative> ... </sbb-teaser-product>
```

### Accessibility

It's important to set the `accessibilityLabel` on the `<sbb-teaser-product>`, which describes the link for screen-reader users.

### Static variant

The `<sbb-teaser-product-static>` is a non-interactive version of the `<sbb-teaser-product>` component,
which can be used to tease a product without making the whole component interactive.
It should be used if there is more than one interactive action.

## API (Web Components, Englisch)

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