# Lead-Container

Komponente des SBB Design Systems Lyne.

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

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/lead-container/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-lead-container--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/lead-container/overview (API: https://lyne-angular.app.sbb.ch/angular/components/lead-container/api)
- GitHub: https://github.com/sbb-design-systems/lyne-components

## Elemente

- `sbb-lead-container`: The `sbb-lead-container` can be used for product pages to display a lead image and following content.

## Übersicht

### Was macht die Komponente?
Ein Lead-Container bildet den Einstieg einer Produktseite. Er zeigt ein grosses Lead-Bild und darunter die einleitenden Inhalte wie Breadcrumb, Titel und Lead-Text. Er ist nur für Content-Seiten gedacht, nicht für Business-Apps.

### Wann soll die Komponente eingesetzt werden?
* Als Einstieg von Produkt- oder Themenseiten, die mit einem Bild eingeleitet werden.
* Um Titel und Einleitung einer Seite einheitlich mit einem Bild zu verbinden.

### Regeln.
* Pro Seite wird höchstens ein Lead-Container eingesetzt und zwar nach dem Header.
* Die Inhalte folgen dieser Reihenfolge: Alerts, Breadcrumb, Zurück-Link, Titel, Lead-Text, Notifications.
* Für die Abstände zwischen den Inhalten sollen die vordefinierten Klassen von Lyne verwendet werden.
* Das Lead-Bild braucht einen Alternativtext. Ist es rein dekorativ, wird es für Screenreader ausgeblendet.

## Implementation (Web Components, Englisch)

The `<sbb-lead-container>` can be used for product pages to display a lead image and following content.

Please note that the gaps between elements inside the unnamed slot (main content) need to be controlled by the consumer.
However, consumers can use the predefined classes
(`sbb-lead-container-lead-spacing` and `sbb-lead-container-lead-text`) to achieve a correct spacing.

As per design rules, the spacings are defined as following:

```html
<sbb-alert-group></sbb-alert-group>

<sbb-breadcrumb-group></sbb-breadcrumb-group>

<sbb-block-link></sbb-block-link>

<sbb-title></sbb-title>

<p></p>

<sbb-notification></sbb-notification>

...

```

Full example with applied spacings (CSS classes) in content:

```html
<sbb-lead-container>
  <style>
    p.other-content {
      margin-block: 0;
    }
  </style>
  <sbb-image
    slot="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-alert-group class="sbb-lead-container-spacing">
    <sbb-alert size="m">
      <sbb-title level="3">Interruption between Genève and Lausanne</sbb-title>
      The rail traffic between Allaman and Morges is interrupted. All trains are cancelled.
      <sbb-link href="https://www.sbb.ch">Find out more</sbb-link>
    </sbb-alert>
  </sbb-alert-group>
  <sbb-breadcrumb-group class="sbb-lead-container-spacing">
    <sbb-breadcrumb href="#" icon-name="house-small"></sbb-breadcrumb>
    <sbb-breadcrumb href="#">Level 1</sbb-breadcrumb>
  </sbb-breadcrumb-group>
  <sbb-block-link
    icon-placement="start"
    icon-name="chevron-small-left-small"
    size="xs"
    href="https://www.sbb.ch"
    class="sbb-lead-container-spacing"
  >
    Link
  </sbb-block-link>
  <sbb-title class="sbb-lead-container-spacing">Title</sbb-title>
  <p class="sbb-text-xl sbb-lead-container-lead-text">Lead text.</p>
  <sbb-notification type="info" class="sbb-lead-container-spacing">
    Vestibulum rutrum elit et lacus sollicitudin, quis malesuada lorem vehicula. Suspendisse at
    augue quis tellus vulputate tempor. Vivamus urna velit, varius nec est ac, mollis efficitur
    lorem. Quisque non nisl eget massa interdum tempus. Praesent vel feugiat metus.
  </sbb-notification>
  <p class="sbb-text-m other-content">Other content.</p>
</sbb-lead-container>
```

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

```html
<sbb-lead-container>
  <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-lead-container>
```

### Accessibility

Please either define the `alt` attribute of your image or set `aria-hidden="true"` to the image
to hide it from the accessibility tree.

## API (Web Components, Englisch)

#### class: `SbbLeadContainerElement`, `sbb-lead-container`

##### Slots

| Name    | Description                                                                                                                                                        |
| ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|         | Use the unnamed slot to add any content to the container.                                                                                                          |
| `image` | Use the image slot to provide the lead image. `sbb-image`, `img` and `picture` elements are supported. For other elements the aspect ratio has to be set manually. |