CSS: callout

div[class~="instui-callout"] — Innbyggð upplýsingatilkynning fyrir stutta áminningu eða athugasemd.

✅ Notaðu Callout þegar:

• Þú þarft að leggja áherslu á mikilvægar upplýsingar eða áminningar í texta

• Skilaboðin eru tiltölulega stutt (setning eða stutt málsgrein)

• Tilkynningin á að vekja athygli án þess að trufla aðalflæðið 🚫 Ekki nota Callout þegar:

• Skilaboðin krefjast samspils eða margra aðgerða — notaðu Modal eða Alert Dialog

• Ef efnið er aðaláhersla síðu — notaðu Card eða Hero layout í staðinn

Aðgengi

• Gakktu úr skugga um að alert hlutverkið sé rétt úthlutað (role="alert" eða role="status")
• Notaðu merkingarbundinn liti-andstæður sem uppfylla WCAG AA staðla
• Treystu ekki eingöngu á lit til að miðla merkingu

Notkun

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

Dæmi

Raufar

Rauf	Lýsing
message	Innihald tilkynningar

Hlutar

Hluti	Lýsing
.instui-content	Ílát fyrir textainnihald.
.instui-icon	Valfrjálst tákn vinstra megin við efnið.

Sýndareiningar

Sýndareining	Lýsing
::before	—

Stöður

Staða	Lýsing
:optional	—

Notuð tákn

Token	Tegund	Gildi
--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	—	—

Tengdar

• alert