CSS: callout

div[class~="instui-callout"] — Avviso informativo inline per un breve promemoria o nota.

✅ Usa Callout quando:

• Hai bisogno di evidenziare informazioni importanti o promemoria inline

• Il messaggio è relativamente breve (da una frase a un breve paragrafo)

• L'avviso dovrebbe attirare l'attenzione senza interrompere il flusso principale 🚫 Non usare Callout quando:

• Il messaggio richiede interazione o più azioni — usa un Modal o Alert Dialog

• Il contenuto è il focus principale della pagina — usa invece una Card o un layout Hero

Accessibilità

• Assicurati che il ruolo alert sia applicato correttamente (role="alert" o role="status")
• Usa un contrasto cromatico semantico che soddisfi gli standard WCAG AA
• Non fare affidamento solo sul colore per trasmettere il significato

Uso

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

Esempi

Slot

Slot	Descrizione
message	Contenuto del messaggio di avviso

Parti

Parte	Descrizione
.instui-content	Contenitore per il contenuto testuale.
.instui-icon	Icona facoltativa a sinistra del contenuto.

Pseudo-elementi

Pseudo-elemento	Descrizione
::before	—

Stati

Stato	Descrizione
:optional	—

Token consumati

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

Correlati

• alert