CSS: callout

div[class~="instui-callout"] — Inline informationsvarning för en kort påminnelse eller notis.

✅ Använd Callout när:

• Du behöver markera viktig information eller påminnelser inline

• Meddelandet är relativt kort (en mening till ett kort stycke)

• Varningen ska dra uppmärksamhet utan att avbryta huvudflödet 🚫 Använd inte Callout när:

• Meddelandet kräver interaktion eller flera åtgärder — använd en Modal eller Alert Dialog

• Innehållet är huvudsakligt fokus på sidan — använd istället en Card eller Hero-layout

Tillgänglighet

• Se till att alert-rollen är korrekt tillämpad (role="alert" or role="status")
• Använd semantisk färgkontrast som uppfyller WCAG AA-standard
• Förlita dig inte enbart på färg för att förmedla betydelse

Användning

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

Platser

Slot	Beskrivning
message	Innehåll i varningsmeddelande

Delar

Del	Beskrivning
.instui-content	Behållare för textinnehållet.
.instui-icon	Valfri ikon till vänster om innehållet.

Pseudo-element

Pseudo-element	Beskrivning
::before	—

Tillstånd

Tillstånd	Beskrivning
:optional	—

Förbrukade tokens

Token	Typ	Värde
--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	—	—

Relaterat

• alert