CSS: callout ​

div[class~="instui-callout"] — Inline informasjonsvarsel for ei kort påminning eller merknad.

✅ Bruk Callout når:

  • Du treng å framheve viktig informasjon eller påminningar inline

  • Meldinga er relativt kort (ei setning til eit kort avsnitt)

  • Varslet bør fange merksemda utan å avbryte hovudflyten 🚫 Ikkje bruk Callout når:

  • Meldinga krev interaksjon eller fleire handlingar — bruk ein Modal eller Alert Dialog

  • Innhaldet er hovudfokuset på sida — bruk heller eit Card- eller Hero-oppsett

Tilgjenge ​

  • Sørg for at alert-rollen er brukt riktig (role="alert" eller role="status")
  • Bruk semantisk fargekontrast som oppfyller WCAG AA-standarden
  • Ikkje stol på farge åleine for å formidle meining

Bruk ​

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

Døme ​

Plassar ​

SlotSkildring
messageInnhald i varselmeldinga

Delar ​

DelSkildring
.instui-contentBehaldar for tekstinnhaldet.
.instui-iconValfritt ikon til venstre for innhaldet.

Pseudo-element ​

Pseudo-elementSkildring
::before—

Tilstandar ​

TilstandSkildring
:optional—

Token brukt ​

TokenTypeVerdi
--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 ​