Hero

Quando usarlo

Il componente hero può essere usato per guidare l'utente verso un contenuto in evidenza e una call to action, oppure come apertura di grande impatto visivo della pagina che possa invogliare gli utenti a scorrere ulteriori contenuti.

Come usarlo

• Usa le varianti con solo immagine per creare aperture di pagina d'effetto.
• Usa le varianti con testo e call to action se vuoi mettere in evidenza un contenuto del sito.

Attenzione a

• Non usare più componenti hero sulla stessa pagina.
• Usa il componente hero con moderazione, consideralo come fosse una copertina o un banner molto in evidenza. Difficilmente avrai bisogno di troppe copertine o banner nell'ambito dello stesso sito o servizio.
• Fai attenzione al corretto contrasto (minimo) tra testo e sfondo nella variante "Con testo e immagine di sfondo"
• Scegli il corretto livello di heading h1-h6 per il titolo a seconda del contesto e della struttura di pagina.
• Usa la corretta semantica html per le call to action laddove presenti: <a> per link di navigazione o ancore, <button> per azioni.
• Usa il componente hero con approccio "fullwidth", sfrutta cioè tutta la larghezza della viewport.

Buone pratiche sui contenuti

• Se usi la variante del componente con immagine e testo abbi cura di progettare un titolo e una descrizione brevi e concisi poiché le persone tendono a scansionare il testo e a evitare la lettura di porzioni di testo lunghe. La descrizione ha l'obiettivo di aggiungere maggiore contesto all'informazione principale contenuta nel titolo.
• Usa un linguaggio semplice.
• Prediligi l'uso di verbi per orientare le azioni anticipate dalla call to action primaria e da eventuali CTA secondarie.

Accessibilità

In stesura

Stato del componente

In stesura