CSS: callout

div[class~="instui-callout"] — Inline információs értesítés rövid emlékeztetőhöz vagy megjegyzéshez.

✅ Használja a Callout-ot, ha:

• Fontos információkat vagy emlékeztetőket kell kiemelned inline

• Az üzenet viszonylag rövid (egy mondat – rövid bekezdés)

• A riasztás felhívja a figyelmet anélkül, hogy megszakítaná a fő folyamatot 🚫 Ne használj Callout-ot, ha:

• Az üzenet interakciót vagy több lépést igényel — használjon Modal-t vagy Alert Dialogot

• A tartalom a oldal fő fókusza — ehelyett használjon Cardot vagy Hero elrendezést

Hozzáférhetőség

• Győződjön meg róla, hogy az alert szerep helyesen van alkalmazva (role="alert" vagy role="status")
• Használjon szemantikus színkontrasztot, amely megfelel a WCAG AA szabványnak
• Ne támaszkodjon kizárólag a színre az információ közvetítéséhez

Használat

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

Példák

Slotok

Slot	Leírás
message	Figyelmeztető üzenet tartalma

Részek

Rész	Leírás
.instui-content	A szövegtartalom tárolója.
.instui-icon	Opcionális ikon a tartalom bal oldalán.

Pseudo-elemek

Pseudo-elem	Leírás
::before	—

Állapotok

Állapot	Leírás
:optional	—

Fogyasztott tokenek

Token	Típus	Érték
--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	—	—

Kapcsolódó

• alert