Vorschau.

Was macht die Komponente?

Das Teaser-Panel zeigt einen kurzen Text in einer roten, trapezförmigen Fläche an. Es ist der Baustein, mit dem z.B. der Teaser-Hero seinen Text über einem Bild darstellt.

Wann soll die Komponente eingesetzt werden?

• Wenn ein Bild oder eine Fläche mit einer kurzen, prägnanten Botschaft ergänzt werden soll.
• Wenn eigene Teaser-Layouts gebaut werden, die der Teaser-Hero nicht abdeckt.

Ähnliche Komponente.

Regeln.

• Der Text im Panel ist kurz, z.B. ein Titel oder ein Satz.
• Für einen klassischen Bild-Teaser mit Link soll der Teaser-Hero verwendet werden.

The <sbb-teaser-panel> is a simple component that displays content in a vertically centered trapezoidal shape.
By default, the component displays a background color fade effect on mouse hover.

<div style="height: ...px;">
  <!-- The panel expands to fill the parent container's size -->
  <sbb-teaser-panel> Panel content </sbb-teaser-panel>
</div>

To make the <sbb-teaser-panel> overlap other content, you can set position: absolute.
The parent element must have position: relative.

<div style="height: ...px; position: relative;">
  <!-- It expands to overlap the parent element -->
  <sbb-teaser-panel style="position: absolute"> Panel content </sbb-teaser-panel>

  <div>Other content</div>
</div>

Accessibility.

The component does not introduce any interactive elements by itself. Ensure that the content slotted into the panel is semantically correct and accessible.
If the panel is used as a clickable element, wrap it with an appropriate interactive component (e.g., <sbb-button> or <sbb-link>).

Angular.

Diese Komponente gibt es auch für Angular im Paket @sbb-esta/lyne-angular.

class: SbbTeaserPanelElement, sbb-teaser-panel.

Slots.