Alert

Gli alert servono a fornire all'utente degli avvisi contestuali all'azione che sta svolgendo in quel momento.
Qui potrai trovare la User Interface, lo snippet e le modalità di utilizzo per gli alert dell'Ecosistema digitale Turismo Cultura.

Avviso informativo
Avviso di attenzione
Avviso di errore
Avviso di successo
Avviso di esempio con contenuti aggiuntivi
                                            
<!-- Avviso informativo -->
<div class="dms-alert dms-alert--info d-flex justify-content-start align-items-center"
    role="alert">
    <i class="dms-wk-icon-info"></i>
    <span>Repellendus ullamcorper <b>voluptatum</b> repellat harum cum dui, ipsam
    lectus nec? Explicabo consequuntur incididunt ipsam. Esempio di <a href="#" class="dms-link" title="Link">link</a></span>
</div>

<!-- Avviso di attenzione -->
<div class="dms-alert dms-alert--warning d-flex justify-content-start align-items-center"
    role="alert">
    <i class="dms-wk-icon-warning"></i>
    <span>Repellendus ullamcorper <b>voluptatum</b> repellat harum cum dui, ipsam
        lectus nec? Explicabo consequuntur incididunt ipsam. Esempio di <a href="#" class="dms-link" title="Link">link</a></span>
</div>				

<!-- Avviso di errore -->
<div class="dms-alert dms-alert--error d-flex justify-content-start align-items-center"
    role="alert">
    <i class="dms-wk-icon-error"></i>
    <div>
        <span>Repellendus ullamcorper <b>voluptatum</b> repellat harum cum dui, ipsam
            lectus nec? Explicabo consequuntur incididunt ipsam. Esempio di <a href="#" class="dms-link" title="Link">link</a></span>
    </div>
</div>

<!-- Avviso di successo -->
<div class="dms-alert dms-alert--success d-flex justify-content-start align-items-center"
    role="alert">
    <i class="dms-wk-icon-success"></i>
    <div>
        <span>Repellendus ullamcorper <b>voluptatum</b> repellat harum cum dui, ipsam
            lectus nec? Explicabo consequuntur incididunt ipsam. Esempio di <a href="#" class="dms-link" title="Link">link</a></span>
    </div>
</div>

<!-- contenuto aggiuntivo -->	
<div class="dms-alert dms-alert--success d-flex justify-content-start align-items-center"
    role="alert">
    <i class="dms-wk-icon-success"></i>
    <div>
        <h4>Avviso di successo!</h4>
        <span>Stai leggendo questo importante messaggio di avviso di successo. 
            Questo testo di esempio sarà più lungo in modo tale da poter vedere come funzioni la spaziatura all'interno di un avviso con questo tipo di contenuto.</span>
            <hr class="dms-divider">
        <span>E' sempre importante garantire le corrette spaziature fra gli elementi.</span>
    </div>
</div>

Utilizzo

Gli avvisi sono disponibili in quattro tipologie, differenziati tra loro attraverso l'indicazione visiva dell'icona e del colore contraddistinte da una specifica classe a seconda della loro funzione:

  • informativa: dms-alert dms-alert--info
  • di successo: dms-alert dms-alert--success
  • di attenzione: dms-alert dms-alert--warning
  • di errore: dms-alert dms-alert--error

Un avviso può contenere una lunghezza variabile di testo, divisori e link.

Ai fini dell'accessibilità, si richiede di inserire l'attributo role="alert" per ogni avviso.