Preview.

What does the component do?

The teaser panel displays a short text in a red, trapezoidal area. It is the building block that, for example, the teaser hero uses to display its text over an image.

When should the component be used?

• When an image or an area is to be complemented with a short, concise message.
• When building custom teaser layouts that the teaser hero does not cover.

Similar component.

Rules.

• The text in the panel is short, e.g. a title or one sentence.
• For a classic image teaser with a link, use the teaser hero.

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.

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

class: SbbTeaserPanelElement, sbb-teaser-panel.

Slots.