# Teaser-Hero

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

## Elements

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

## Related components

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

## Overview

### What does the component do?
The teaser hero shows a large image with a red panel containing a short text and a link. It should catch the eye and have an emotional effect.

### When should the component be used?
* To promote a topic, product or service prominently with a strong image.
* As an entry point to further content or pages.

### Rules.
* The image supports the message and is high-quality and emotional.
* The text in the panel is short and inviting. The link describes its target.
* Do not slot block elements (e.g. `div`) into the panel, so that the semantics remain correct for screen readers.
* Do not stack several teaser heroes directly or mix them with other teaser types.

## Implementation (web components)

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)

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