Pattern library

Sezione 2.1 Alert

La componente è utilizzata per brevi messaggi testuali all'interno delle funzioni dispositive all'interno della componente .c-fieldset. E' possibile che la componente venga utilizzata in altri contesti. Le quattro estensioni permettono di colorare il messaggio in base al tipo di utilizzo e al tipo di comunicazione.

Stili default

Attenzione: alert generico Errore: alert critico Conferma: alert di successo Attenzione: alert informativo

Markup

<span class="c-alert">Attenzione: alert generico</span>
<span class="c-alert c-alert--error">Errore: alert critico</span>
<span class="c-alert c-alert--success">Conferma: alert di successo</span>
<span class="c-alert c-alert--warning">Attenzione: alert informativo</span>

Sezione 2.2 Badge

Utilizzata per le notifiche, questa componente utilizza cinque colori differenti per attirare l'attenzione dell'utente su un dato numerico o testuale presente in un menu o in una funzione.

Stili default

12 12 12 12 12

Markup

<span class="c-badge">12</span>
<span class="c-badge c-badge--primary">12</span>
<span class="c-badge c-badge--secondary">12</span>
<span class="c-badge c-badge--tertiary">12</span>
<span class="c-badge c-badge--quaternary">12</span>

Sezione 2.3 Message

Messaggi generici di testo che comunicano all'utente un errore, una conferma o una info generica. Le cinque varianti cambiano nel colore e nel tipo di messaggio che si vuole comunicare.

Stili default