CSS: callout ​

div[class~="instui-callout"] — Avís d'informació en línia per a un recordatori o nota breu.

✅ Utilitza Callout quan:

  • Necessites destacar informació important o recordatoris en línia

  • El missatge és relativament breu (una frase o un paràgraf curt)

  • L'avís ha d'atraure l'atenció sense interrompre el flux principal 🚫 No utilitzis Callout quan:

  • El missatge requereix interacció o múltiples accions — utilitza un Modal o Alert Dialog

  • El contingut és el focus principal de la pàgina — utilitza en canvi una Card o un disseny Hero

Accessibilitat ​

  • Assegura't que el rol d'alerta s'aplica correctament (role="alert" o role="status")
  • Utilitza contrast de color semàntic que compleixi els estàndards WCAG AA
  • No confiïs només en el color per transmetre el significat

Ús ​

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

Exemples ​

Slots ​

SlotDescripció
messageContingut del missatge d'alerta

Parts ​

PartDescripció
.instui-contentContenidor per al contingut de text.
.instui-iconIcona opcional a l'esquerra del contingut.

Pseudoelements ​

PseudoelementDescripció
::before—

Estats ​

EstatDescripció
:optional—

Tokens consumits ​

TokenTipusValor
--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——

Relacionat ​