.c-message--info
Messaggio in informazione generica
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
<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>
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
<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>
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
Estensioni e modificatori
.c-message--info
Messaggio in informazione generica
.c-message--success
Messaggio di conferma
.c-message--warning
Messaggio di attenzione
.c-message--error
Messaggio di errore
<div class="c-message [modifier class]">
<h3 class="c-message__title">Messaggio</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.</p>
</div>