CSS: callout ​

div[class~="instui-callout"] — Inline informationsadvarsel til en kort påmindelse eller note.

✅ Brug Callout når:

  • Du har brug for at fremhæve vigtig information eller påmindelser inline

  • Beskeden er forholdsvis kort (en sætning til et kort afsnit)

  • Advarslen skal tiltrække opmærksomhed uden at afbryde hovedflowet 🚫 Brug ikke Callout når:

  • Beskeden kræver interaktion eller flere handlinger — brug en Modal eller Alert Dialog

  • Indholdet er hovedfokus på siden — brug i stedet et Card- eller Hero-layout

Tilgængelighed ​

  • Sørg for, at alert-rollen er korrekt anvendt (role="alert" eller role="status")
  • Brug semantisk farvekontrast, der opfylder WCAG AA-standarder
  • Stol ikke kun på farve for at formidle betydning

Brug ​

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

Eksempler ​

Slots ​

SlotBeskrivelse
messageIndhold af advarselsbesked

Dele ​

DelBeskrivelse
.instui-contentContainer til tekstindholdet.
.instui-iconValgfrit ikon til venstre for indholdet.

Pseudo-elementer ​

Pseudo-elementBeskrivelse
::before—

Tilstande ​

TilstandBeskrivelse
:optional—

Forbrugte tokens ​

TokenTypeVærdi
--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——

Relateret ​