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 ​

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

Exempel ​

Platser ​

SlotBeskrivning
messageInnehåll i varningsmeddelande

Delar ​

DelBeskrivning
.instui-contentBehållare för textinnehållet.
.instui-iconValfri ikon till vänster om innehållet.

Pseudo-element ​

Pseudo-elementBeskrivning
::before—

Tillstånd ​

TillståndBeskrivning
:optional—

Förbrukade tokens ​

TokenTypVä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 ​