CSS: callout

div[class~="instui-callout"] — Inline-informatiewaarschuwing voor een korte herinnering of opmerking.

✅ Gebruik Callout wanneer:

• Je moet belangrijke informatie of herinneringen inline benadrukken

• Het bericht is relatief kort (een zin tot een korte alinea)

• De waarschuwing moet aandacht trekken zonder de hoofdstroom te onderbreken 🚫 Gebruik Callout niet wanneer:

• Het bericht vereist interactie of meerdere acties — gebruik een Modal of Alert Dialog

• De inhoud is de hoofdfocus van de pagina — gebruik in plaats daarvan een Card of Hero-layout

Toegankelijkheid

• Zorg dat de alert-rol correct is toegepast (role="alert" of role="status")
• Gebruik semantisch kleurcontrast dat voldoet aan WCAG AA-standaarden
• Vertrouw niet alleen op kleur om betekenis over te brengen

Gebruik

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

Voorbeelden

Slots

Slot	Beschrijving
message	Inhoud van het waarschuwingsbericht

Onderdelen

Onderdeel	Beschrijving
.instui-content	Container voor de tekstinhoud.
.instui-icon	Optioneel pictogram links van de inhoud.

Pseudo-elementen

Pseudo-element	Beschrijving
::before	—

Staten

Toestand	Beschrijving
:optional	—

Gebruikte tokens

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

Gerelateerd

• alert