Design System
Playground Zur Vorlage

Komponenten · InhaltCallout

Komponente · 6 Varianten

Callout

components/Callout.astro

Info-Box im Fond mit Label und Signal-Punkt. Warnung, Fehler, Tipp nur über den Punkt. Alternativ Kante links.

Notizen

  • Bestand: kein Callout. Signal-Regel: Punkt oder Icon, nie Fill.
  • role=note bzw. alert.

Props

Name Typ Default Notiz
variant "info" | "hinweis" | "warnung" | "fehler" | "tipp" | "kante" "info" 01–06.
surface "nacht" | "paper" "nacht" Pflicht-Paar.
<Callout variant="info" surface="nacht" />

01 · Info

Punkt granit-500

Signal. Fond.

Nacht

Paper

02 · Hinweis

Wie Info, anderes Wort

Docs. —

Nacht

Paper

03 · Warnung

Punkt oliv-300

Signal warning. role=alert.

Nacht

Paper

04 · Fehler

Punkt granit-800

Signal error. role=alert.

Nacht

Paper

05 · Tipp

Punkt oliv-500

Signal success. —

Nacht

Paper

06 · Kante

Kante 2px links, kein Fond

Zitat-Block kante. Für Prose.

Nacht

Paper