CSS: callout

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

✅ Utiliser Callout lorsque :

• Vous devez mettre en évidence des informations importantes ou des rappels en ligne

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

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

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

• Le contenu est l'élément principal de la page — utilisez plutôt un 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";

Emplacements (slots)

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	—

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

Liés

• alert