CSS: callout

div[class~="instui-callout"] — Alerte d'information en ligne pour un rappel ou une note courte.

✅ Utilisez Callout lorsque :

• Vous devez souligner des informations importantes ou des rappels en ligne

• Le message est relativement bref (d'une phrase à un court paragraphe)

• L'alerte doit attirer l'attention sans interrompre le flux principal 🚫 N'utilisez pas Callout lorsque :

• Le message nécessite une interaction ou plusieurs actions — utilisez un Modal ou une Alert Dialog

• Le contenu est le point central de la page — utilisez plutôt une Card ou une mise en page Hero

Accessibilité

• Assurez-vous que le rôle d'alerte est correctement appliqué (role="alert" ou role="status")
• Utilisez un contraste de couleur sémantique conforme aux normes WCAG AA
• Ne vous fiez pas uniquement à la couleur pour transmettre le sens

Utilisation

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

Exemples

Emplacements

Emplacement	Description
message	Contenu du message d'alerte

Parties

Partie	Description
.instui-content	Conteneur pour le contenu textuel.
.instui-icon	Icône optionnelle à gauche du contenu.

Pseudo-éléments

Pseudo-élément	Description
::before	—

États

État	Description
:optional	—

Tokens consommés

Token	Type	Valeur
--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	—	—

Connexe

• alert