CSS: callout

div[class~="instui-callout"] — Rhybudd gwybodaeth mewn-linell ar gyfer atgoffa byr neu nodyn.

✅ Defnyddiwch Callout pan:

• Mae angen i chi amlygu gwybodaeth bwysig neu atgoffion mewn-linell

• Mae'r neges yn weddol fyr (brawddeg i baragraff byr)

• Dylai'r rhybudd dynnu sylw heb darfu ar y llif prif 🚫 Peidiwch â defnyddio Callout pan:

• Mae'r neges yn gofyn am ryngweithio neu sawl gweithred — defnyddiwch Modal neu Alert Dialog

• Mae'r cynnwys yn ffocws prif y dudalen — defnyddiwch Card neu leformat Hero yn hytrach

Hygyrchedd

• Sicrhewch fod rôl y rhybudd wedi'i chymhwyso'n iawn (role="alert" neu role="status")
• Defnyddiwch gytbwysedd lliw semantig sy'n cwrdd â safonau WCAG AA
• Peidiwch â dibynnu ar liw yn unig i gyfleu ystyr

Defnydd

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

Slotiau

Slot	Disgrifiad
message	Cynnwys neges rhybudd

Rhannau

Rhan	Disgrifiad
.instui-content	Cynhwysydd ar gyfer y cynnwys testun.
.instui-icon	Eicon dewisol i'r chwith o'r cynnwys.

Is-elfennau

Is-elfen	Disgrifiad
::before	—

Statwsau

Statws	Disgrifiad
:optional	—

Tocynnau a ddefnyddiwyd

Token	Math	Gwerth
--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	—	—

Perthnasol

• alert