# Teaser-Panel

Component of the SBB design system Lyne.

- Package: `@sbb-esta/lyne-elements` (Angular: `@sbb-esta/lyne-angular`)
- Structure: one element
- Categories: Display
- Status: Design guidelines complete

## Links

- Page on digital.sbb.ch: https://digital.sbb.ch/en/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

## Elements

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

## Related components

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

## Overview

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

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

## Implementation (web components)

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)

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

##### Slots

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