Overlay

Etichetta opaca per aggiungere testo o icone in sovrimpressione a immagini

Componenti

Metadati e link per approfondire

Utile per

Anteprima

Anteprima:
Inizio anteprima:Fine anteprima.

Quando usarlo

Usa il componente Overlay per aggiungere testo in sovrapposizione a un’immagine.

Può essere utilizzato come apertura e presentazione di una pagina oppure come collegamento a sotto-sezioni.

Alternative a questo componente

  • Card: usa la versione con immagine se devi mostrare molti contenuti in uno spazio ridotto.
  • Dimmer: quando hai bisogno di mostrare un messaggio in sovrimpressione, coprendo una o più sezioni di una pagina.

Come usarlo

  • Lo sfondo può coprire l’immagine per intero o solo una parte di essa, generalmente quella in basso.
  • Usa colori tenui o non eccessivamente saturi per garantire un buon contrasto con il testo.

Attenzione a

  • Non utilizzare il testo in sovraimpressione come didascalia dell’immagine.

Buone pratiche sui contenuti

  • Scrivi un testo breve che descriva il contenuto a cui si accede cliccando sull'immagine.

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

Stato del componente

Lo stato del presente componente nelle diverse librerie di design e sviluppo del design system

LibreriaStato componenteLink

UI Kit Italia (design)

Non presenteKitUI Kit Italia su Figma (si apre in una nuova finestra)

Bootstrap Italia

Da verificareScheda documentazione (si apre in una nuova finestra)

React

Da verificareScheda Storybook (si apre in una nuova finestra)

Angular

Non presenteScheda documentazione (si apre in una nuova finestra)

Anatomia

Gli elementi che formano Overlay

Il componente overlay è composto da:

  1. immagine, che può essere di vari formati;
  2. sfondo, lo sfondo in sovrimpressione, può essere ad altezza fissa o a tutta altezza;
  3. titolo, il titolo del contenuto mostrato;
  4. icona, può essere utilizzata per suggerire flussi di navigazione.

Comportamento

Il componente Overlay agisce come uno strato sopra l'immagine, unendo contenuti visivi e testuali.

Specifiche di design

Tutte le misure indicate sono espresse in px.

Specifiche di design di Overlay

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