Callout

Un box che presenta testi in uno stile visivo distintivo, utile per evidenziare contenuti su lunghe pagine testuali

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

Da verificare

Uso e contrasto dei colori, leggibilità

Amichevole con lettori di schermo

Da verificare

Struttura titolazioni, etichette e testi alternativi

Navigabile

Da verificare

Focus, struttura, navigazione da tastiera o altri device

Comprensibile

Da verificare

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, oppure 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 links.

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 in evidenza maggiormenete in contenuti;
  2. titolo del messaggio;
  3. icona;
  4. angolo piegato che simula un foglio;
  5. testo del messaggio può essere composto da uno o più paragrafi di testo e contenere links 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