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 ​

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

Enghreifftiau ​

Slotiau ​

SlotDisgrifiad
messageCynnwys neges rhybudd

Rhannau ​

RhanDisgrifiad
.instui-contentCynhwysydd ar gyfer y cynnwys testun.
.instui-iconEicon dewisol i'r chwith o'r cynnwys.

Is-elfennau ​

Is-elfenDisgrifiad
::before—

Statwsau ​

StatwsDisgrifiad
:optional—

Tocynnau a ddefnyddiwyd ​

TokenMathGwerth
--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 ​