Aperçu.

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.

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:

<sbb-alert-group></sbb-alert-group>
<!-- var(--sbb-spacing-responsive-m) -->
<sbb-breadcrumb-group></sbb-breadcrumb-group>
<!-- var(--sbb-spacing-4x) -->
<sbb-block-link></sbb-block-link>
<!-- var(--sbb-spacing-4x) -->
<sbb-title></sbb-title>
<!-- var(--sbb-spacing-responsive-s) -->
<p></p>
<!-- var(--sbb-spacing-responsive-s) -->
<sbb-notification></sbb-notification>
<!-- var(--sbb-spacing-responsive-xxxs) -->
...
<!-- The last element should have zero block-end spacing to the container -->

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

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

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

Angular.

Ce composant est également disponible pour Angular dans le paquet @sbb-esta/lyne-angular.

class: SbbLeadContainerElement, sbb-lead-container.

Slots.