# Teaser-Product

Component of the SBB design system Lyne.

- Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Structure: one element
- Categories: Action
- Status: Design guidelines complete

## Links

- Page on digital.sbb.ch: https://digital.sbb.ch/en/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

## Elements

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

## Related components

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

## Overview

### What does the component do?
The teaser product promotes a product with text and an optional footnote on an image. On small screens, the content follows the image. There are two variants:
* Teaser product: The whole area is clickable and leads to a target.
* Teaser product static: The area is not clickable. Only the elements it contains, for example buttons or links, are interactive.

### When should the component be used?
* To highlight a product or service with an image and lead to the product page.
* When the text may be longer than in the [simple teaser](https://digital.sbb.ch/en/design-system/lyne/components/teaser/), e.g. with a title and footnote.
* The teaser product static suits cases where the whole area should not be clickable or where there is more than one action.

### Rules.
* Use a concise heading and a short description.
* The teaser product is interactive as a whole. To support this visually, a static button (not interactive) can be added.
* With more than one action, use the teaser product static.
* On the teaser product, set an `accessibilityLabel` that describes the link for screen readers.
* Do not use too many different teaser types and sizes on one page.

## Implementation (web components)

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)

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