Componenti

Bottoni

Di seguito un esempio dello stile da utilizzare per i bottoni.

I colori sono personalizzabili in base alla palette che sarà stata individuata per ciascun sito web. È possibile impostare le dimensioni dei bottoni utilizzando le classi di utilità responsive (u-text-r-*).

mostra il codice

mostra il codice

mostra il codice

Form

SI DEVE

Nei form ogni campo deve essere sempre associato, anche attraverso il tag `<label>`, a un’etichetta che ne descriva in maniera chiara il contenuto che deve essere inserito. Per essere sempre leggibile, l’etichetta deve essere posizionata esternamente al campo. Deve essere consentito inoltre lo spostamento da un campo all’altro tramite il tasto Tab.

Esempio di stile per form

mostra il codice

Form errore

SI DEVE

In caso di errori o di mancata compilazione dei campi di un form si dovrà sempre evidenziare in maniera immediatamente percepibile quale sia il campo, o i campi, che non soddisfano le richieste, aggiungendo l’indicazione dell’azione da compiere per il corretto completamento.

mostra il codice

Alert

Per i messaggi di “allerta” contestuali alla compilazione (messaggi di errore o di successo) è importante evitare di veicolare l’informazione unicamente tramite l’utilizzo del colore: l’esito dell’operazione va chiarito in maniera evidente nel testo e, possibilmente, tramite un’icona esplicativa.

Alert per errori

mostra il codice

Alert per messaggi di attenzione

mostra il codice

Alert per messaggi di successo

mostra il codice

Alert per informazioni

mostra il codice