Preview.

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.

Similar components.

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.

Specification.

Web Components.

The web component is in the package @sbb-esta/lyne-elements.

Documentation.

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.

This component is also available for Angular in the package @sbb-esta/lyne-angular.

class: SbbTeaserHeroElement, sbb-teaser-hero.

Properties.

Slots.