Anteprima.

Was macht die Komponente?

Der Teaser-Hero zeigt ein grosses Bild mit einem roten Panel, das einen kurzen Text und einen Link enthält. Er soll auffallen und emotional wirken.

Wann soll die Komponente eingesetzt werden?

• Um ein Thema, Produkt oder eine Dienstleistung prominent mit einem starken Bild zu bewerben.
• Als Einstieg zu weiterführenden Inhalten oder Seiten.

Componenti simili.

Regeln.

• Das Bild unterstützt die Botschaft und ist hochwertig und emotional.
• Der Text im Panel ist kurz und einladend. Der Link beschreibt das Ziel.
• Im Panel keine Block-Elemente (z.B. div) verwenden, damit die Semantik für Screenreader stimmt.
• Nicht mehrere Hero-Teaser direkt untereinander oder neben anderen Teaser-Arten platzieren.

Specifica.

Web Components.

Il web component si trova nel pacchetto @sbb-esta/lyne-elements.

Documentazione.

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.

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

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

Angular.

Questo componente è disponibile anche per Angular nel pacchetto @sbb-esta/lyne-angular.

class: SbbTeaserHeroElement, sbb-teaser-hero.

Properties.

Slots.