# Message

Komponente des SBB Design Systems Lyne.

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

## Links

- Seite auf digital.sbb.ch: https://digital.sbb.ch/de/design-system/lyne/components/message/
- Storybook: https://lyne-elements.app.sbb.ch/?path=/docs/elements-message--docs
- Angular (`@sbb-esta/lyne-angular`): https://lyne-angular.app.sbb.ch/angular/components/message/overview (API: https://lyne-angular.app.sbb.ch/angular/components/message/api)
- Figma: https://www.figma.com/design/mWknI2rC5DJmOgRO61WKai/Lyne-Components?node-id=7491-40
- GitHub: https://github.com/sbb-design-systems/lyne-components/tree/v5.12.0/src/elements/message

## Elemente

- `sbb-message`: It displays a complex message combining a title, an image, an action and some content.

## Übersicht

### Was macht die Komponente?
Eine Message zeigt eine Meldung im Seitenlayout, z.B. einen Hinweis, einen Fehler oder einen leeren Zustand. Sie besteht aus einem Titel und optional Untertitel, Bild, Fehlercode und einer Aktion. Im Unterschied zur [Notification](https://digital.sbb.ch/de/design-system/lyne/components/notification/) hat sie keinen Typ und kann sich nicht selbst ausblenden.

### Wann soll die Komponente eingesetzt werden?
* Für Meldungen, die Teil des Inhalts sind, z.B. in leeren Listen oder bei Fehlern beim Laden von Inhalten.
* Wenn die Meldung weniger Aufmerksamkeit erzeugen soll als [Alert](https://digital.sbb.ch/de/design-system/lyne/components/alert/) oder Notification.

### Regeln.
* Die Message wird ins Layout integriert und nicht wie Alert oder Notification platziert.
* Titel und Text sagen klar, was passiert ist und was Nutzende tun können.
* Eine Aktion (z.B. «Erneut versuchen») ist optional.

## Implementation (Web Components, Englisch)

The `<sbb-message>` component can be used to display a complex message.

### Slots

The title slot should be used to slot a `<sbb-title>` element.
Optionally, the user can provide other elements such as a subtitle paragraph via the `subtitle` slot,
a [sbb-image](https://lyne-elements.app.sbb.ch/?path=/docs/elements-image--docs) to provide an image via the `image` slot,
a paragraph to provide an error code via the `legend` slot,
and a [sbb-button](https://lyne-elements.app.sbb.ch/?path=/docs/elements-button--docs) to provide a custom action via the `action` slot.

```html
<sbb-message>
  <sbb-image slot="image" [...]></sbb-image>
  <sbb-title slot="title" level="3">Title</sbb-title>
  <p slot="subtitle">Subtitle</p>
  <p slot="legend">Error code: 0001</p>
  <sbb-button slot="action" [...]>Action</sbb-button>
</sbb-message>
```

## API (Web Components, Englisch)

Vollständige API-Tabellen (Attribute, Events, Slots, CSS-Eigenschaften): https://digital.sbb.ch/de/design-system/lyne/components/message/api.md