CSS: callout

div[class~="instui-callout"] — Inline informasjonsvarsel for en kort påminnelse eller notat.

✅ Bruk Callout når:

• Du trenger å fremheve viktig informasjon eller påminnelser inline

• Meldingen er relativt kort (en setning til et kort avsnitt)

• Varslet skal trekke oppmerksomhet uten å avbryte hovedflyten 🚫 Ikke bruk Callout når:

• Meldingen krever interaksjon eller flere handlinger — bruk en Modal eller Alert Dialog

• Innholdet er hovedfokus på siden — bruk et Card- eller Hero-oppsett i stedet

Tilgjengelighet

• Sørg for at alert-rollen er riktig brukt (role="alert" eller role="status")
• Bruk semantisk fargekontrast som oppfyller WCAG AA-standarder
• Ikke stol kun på farge for å formidle mening

Bruk

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

Slots

Slot	Beskrivelse
message	Innhold i varselmelding

Deler

Del	Beskrivelse
.instui-content	Beholder for tekstinnholdet.
.instui-icon	Valgfritt ikon til venstre for innholdet.

Pseudo-elementer

Pseudo-element	Beskrivelse
::before	—

Tilstander

Tilstand	Beskrivelse
:optional	—

Forbrukte tokens

Token	Type	Verdi
--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	—	—

Relatert

• alert