Forward

Un pulsante che permette agli utenti di scorrere direttamente a un contenuto specifico in pagina

Componenti

Metadati e link per approfondire

Utile per

Anteprima

Per visualizzare la funzionalità del componente è necessario implementarlo.

Anteprima:
Inizio anteprima:Fine anteprima.

Quando usarlo

Usa il componente Forward su pagine lunghe, per permettere agli utenti di scorrere direttamente a un contenuto specifico. Ad esempio, può essere usato su una prima schermata di copertina, in basso, per spostare l'attenzione sul contenuto che segue, invitando le persone a scoprirlo.

Come usarlo

  • Usa un componente Forward nel contesto di pagine lunghe con sezioni in evidenza, come ad esempio pagine che presentano un componente Hero.
  • Imposta l'ancora sul contenuto in pagina a cui vuoi far arrivare velocemente l'utente, dopo che ha cliccato sul componente.

Attenzione a

  • Non usare più componenti Forward sulla stessa pagina.
  • Rendere coerente la funzione nel contesto dello stesso sito o servizio se presente su più pagine.
  • Testare il funzionamento e il risultato dell'azione, in particolare ponendo attenzione che al compiersi dell'azione alcuni contenuti non siano nascosti da elementi sticky o barre di navigazione.

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

Anatomia

Gli elementi che formano il Forward

Il componente Forward è composto da:

  1. area di interazione (trasparente): di solito si estende in orizzontale per tutto lo spazio a disposizione;
  2. icona: freccia verso il basso, che indica all'utente l'azione che sta per compiere.

Comportamento

Al click/tap sul componente o alla sua attivazione da tastiera, il browser scrollerà portando l'utente direttamente al contenuto desiderato.

Tutta l'area di interazione mostra il contorno con lo status Focus se selezionata da tastiera.

Specifiche di design

Tutte le misure indicate sono espresse in px.

Gli elementi che formano il Forward

Come iniziare

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

Anteprima

Per visualizzare la funzionalità del componente è necessario implementarlo.

Anteprima:
Inizio anteprima:Fine anteprima.

Come iniziare

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