CSS: callout

div[class~="instui-callout"] — Alèt enfòmasyon anliy pou yon ti rapèl oswa nòt.

✅ Itilize Callout lè:

• Ou bezwen mete an evidans enfòmasyon enpòtan oswa rapèl anliy

• Mesaj la relativman kout (yon fraz oswa yon ti paragraf)

• Alèt la ta dwe atire atansyon san li pa entèwonp koule prensipal la 🚫 Pa itilize Callout lè:

• Mesaj la mande entèraksyon oswa plizyè aksyon — itilize yon Modal oswa Alert Dialog

• Kontni an se sant atansyon paj la — itilize yon Card oswa layout Hero olye de sa

Aksè

• Asire w wòl alèt la aplike kòrèkteman (role="alert" oswa role="status")
• Sèvi ak kontrast koulè semantik ki satisfè estanda WCAG AA
• Pa konte sèlman sou koulè pou transmèt sans

Itilizasyon

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

Egzanp

Espas

Espas	Deskripsyon
message	Kontni mesaj alèt

Pati

Pati	Deskripsyon
.instui-content	Kontenè pou kontni tèks la.
.instui-icon	Ikòn opsyonèl sou bò gòch kontni an.

Pseudo-eleman

Pseudo-eleman	Deskripsyon
::before	—

Eta

Eta	Deskripsyon
:optional	—

Tokens konsome

Token	Tip	Valè
--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	—	—

Ki gen rapò

• alert