# Teaser-Panel

Komponente des SBB Design Systems Lyne.

- Paket: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Aufbau: ein Element
- Kategorien: Display
- Status: Gestaltungsrichtlinien vollständig

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/teaser-panel/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-teaser-panel--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/teaser-panel/overview (API: https://lyne-angular.app.sbb.ch/angular/components/teaser-panel/api)
- GitHub: https://github.com/sbb-design-systems/lyne-components

## Elemente

- `sbb-teaser-panel`: It displays the content in a vertically centered trapezoidal shape.

## Verwandte Komponenten

- Ähnlich: [Teaser-Hero](https://digital.sbb.ch/de/design-system/lyne/components/teaser-hero/index.md)

## Übersicht

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

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

## Implementation (Web Components, Englisch)

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.

```html
<div style="height: ...px;">
  
  <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`.

```html
<div style="height: ...px; position: relative;">
  
  <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>`).

## API (Web Components, Englisch)

#### class: `SbbTeaserPanelElement`, `sbb-teaser-panel`

##### Slots

| Name | Description                                           |
| ---- | ----------------------------------------------------- |
|      | Use the unnamed slot to add text content to the panel |