CSS: callout

div[class~="instui-callout"] — Inline-Informationshinweis für eine kurze Erinnerung oder Notiz.

✅ Callout verwenden, wenn:

• Sie wichtige Informationen oder Erinnerungen inline hervorheben müssen

• Die Nachricht relativ kurz ist (ein Satz bis ein kurzer Absatz)

• Der Hinweis Aufmerksamkeit erregen soll, ohne den Hauptfluss zu unterbrechen 🚫 Callout nicht verwenden, wenn:

• Die Nachricht Interaktion oder mehrere Aktionen erfordert — verwenden Sie ein Modal oder einen Alert-Dialog

• Der Inhalt im Mittelpunkt der Seite steht — verwenden Sie stattdessen ein Card- oder Hero-Layout

Barrierefreiheit

• Stellen Sie sicher, dass die Alert-Rolle korrekt gesetzt ist (role="alert" oder role="status")
• Verwenden Sie einen semantischen Farbkontrast, der den WCAG AA-Standards entspricht
• Verlassen Sie sich nicht nur auf Farbe, um Bedeutung zu vermitteln

Verwendung

@import "@pantoken/plugin-layouts/layouts.css";

Beispiele

Slots

Slot	Beschreibung
message	Inhalt der Alert-Nachricht

Teile

Teil	Beschreibung
.instui-content	Container für den Textinhalt.
.instui-icon	Optionales Icon links neben dem Inhalt.

Pseudo-Elemente

Pseudo-Element	Beschreibung
::before	—

Zustände

Zustand	Beschreibung
:optional	—

Verbrauchte Tokens

Token	Typ	Wert
--instui-color-info-background	—	—
--instui-color-info-border	—	—
--instui-color-info-text	—	—
--instui-radius-medium	—	—
--instui-size-small	<length>	—
--instui-space-medium	—	—
--instui-space-small	—	—

Verwandt

• alert