CSS: callout

div[class~="instui-callout"] — Alerta de información en línea para un recordatorio o nota breve.

✅ Usa Callout cuando:

• Necesitas resaltar información importante o recordatorios en línea

• El mensaje es relativamente breve (una frase o un párrafo corto)

• La alerta debe llamar la atención sin interrumpir el flujo principal 🚫 No uses Callout cuando:

• El mensaje requiere interacción o múltiples acciones — usa un Modal o un Alert Dialog

• El contenido es el foco principal de la página — usa en su lugar un Card o un diseño Hero

Accesibilidad

• Asegúrate de que el rol de alerta esté aplicado correctamente (role="alert" o role="status")
• Usa contraste de color semántico que cumpla con los estándares WCAG AA
• No confíes únicamente en el color para transmitir significado

Uso

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

Ejemplos

Ranuras

Ranura	Descripción
message	Contenido del mensaje de alerta

Partes

Parte	Descripción
.instui-content	Contenedor para el contenido de texto.
.instui-icon	Icono opcional a la izquierda del contenido.

Pseudoelementos

Pseudoelemento	Descripción
::before	—

Estados

Estado	Descripción
:optional	—

Tokens consumidos

Token	Tipo	Valor
--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	—	—

Relacionado

• alert