# IllustratedMessage

Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht angezeigt werden kann.

## Guidelines

# Grundlagen

Die IllustratedMessage dient als Platzhalter, wenn der eigentliche Inhalt nicht
angezeigt werden kann. Sie bietet eine Kombination aus
[Icon](/04-components/content/icon/overview), einer
[Heading](/04-components/content/heading/overview) und einer unterstützenden
Beschreibung. Optional kann sie durch interaktive Elemente wie
[Buttons](/04-components/actions/button/overview) oder
[Links](/04-components/navigation/link/overview) ergänzt werden. Ziel ist es,
leere Seiten visuell aufzulockern und dem User kontextbezogene Hinweise zu
geben, wie er fortfahren kann.

## Best practices

Achte bei der Verwendung einer IllustratedMessage darauf, dass ...

- das [Icon](/04-components/content/icon/overview) zum Kontext der Seite passt
  und nicht ablenkt.
- der Text klar beschreibt, warum der Zustand leer ist und was als Nächstes zu
  tun ist.
- Handlungsaufforderungen mit interaktiven Elementen wie
  [Buttons](/04-components/actions/button/overview) oder
  [Links](/04-components/navigation/link/overview) unterstützt werden.

## Verwendung

Verwende eine IllustratedMessage, um ...

- dem User visuelles und inhaltliches Feedback zu geben, wenn keine Daten
  vorhanden sind.
- Vorschläge oder Handlungsoptionen aufzuzeigen, die dem User helfen, Inhalte zu
  erstellen oder zu entdecken.
- gesperrte Bereiche freundlich und verständlich zu gestalten, um zum Beispiel
  Wartezeiten zu überbrücken.