Callout

Box con uno stile visivo distintivo per evidenziare contenuti testuali importanti su pagine lunghe

Componenti

Metadati e link per approfondire

Utile per

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Quando usarlo

Utilizza il componente Callout per attirare l'attenzione del lettore su un'informazione particolarmente importante.

Un callout è perfetto per mostrare in pagina messaggi informativi ma anche di errore o successo, oppure per fornire suggerimenti o consigli utili.

Come usarlo

  • Inserisci il callout in un punto strategico della pagina, come all'inizio di una sezione per fornire un riepilogo o una panoramica dei contenuti che seguiranno.

Attenzione a

  • Usare il callout con parsimonia per attirare l'attenzione dell'utente su punti specifici dell'interazione, ma senza sovraccaricare la pagina.

Buone pratiche sui contenuti

  • Il testo utilizzato per il messaggio dovrebbe essere breve e conciso.
  • Nel caso che i contenuti del callout contengano numerose informazioni dividi il testo in paragrafi per una migliore leggibilità.

Accessibilità

Lo stato delle verifiche di accessibilità effettuate sul componente Bootstrap Italia

CaratteristicaStatoDescrizione

Visivamente accessibile

Pronto

Uso e contrasto dei colori, leggibilità

Amichevole con lettori di schermo

Verifica in corso

Struttura titolazioni, etichette e testi alternativi

Navigabile

Verifica in corso

Focus, struttura, navigazione da tastiera o altri device

Comprensibile

Pronto

Comprensibile, prevedibile, gestione semplice dell’errore

Anatomia

Gli elementi che formano il callout

Il componente callout è composta da:

  1. bordo, che può essere disposto su tutti i lati o solo sul lato sinistro;
  2. titolo del messaggio in evidenza;
  3. icona rappresentativa della tipologia di messaggio;
  4. testo del messaggio, che può essere composto da uno o più paragrafi di testo e contenere link.

Callout Approfondimento

Gli elementi che formano il callout approfondimento

Il callout approfondimento ha un aspetto radicalmente differente ed è composta da:

  1. colore di sfondo, che porta maggiormente in evidenza in contenuti;
  2. titolo del messaggio;
  3. icona;
  4. angolo piegato, che simula un foglio;
  5. testo del messaggio, che può essere composto da uno o più paragrafi di testo e contenere link o pulsanti;
  6. pulsante "leggi tutto", per espandere il contenuto nel caso fosse troppo lungo;
  7. pulsante azione come il download del testo o documento.

Specifiche di design

Tutte le misure indicate sono espresse in px.

Callout

Specifiche di design del callout Specifiche di design del callout

Callout Highlight

Specifiche di design del callout highlight

Callout Approfondimento

Specifiche di design del callout highlight

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Come iniziare

Scopri come utilizzare tutti gli strumenti pensati per progettare interfacce ed esperienze dei servizi pubblici