Callout
I Callout posso essere utilizzati per evidenziare alcune parti del testo che richiedono particolare attenzione. Possono contenere messaggi di errore, avvertimenti, suggerimenti etc.
Esempio
Il Callout basico è costituito da un contenitore <div> con classe .callout, un titolo contenuto in un <div> con classe .callout-title e un testo contenuto in uno o più tag <p>.
Al titolo può essere aggiunta un’icona a scelta fra quelle disponibili, avendo cura di nasconderla agli screen reader con la proprietà aria-hidden="true".
Nel caso l’icona comunicasse visivamente contenuti non disponibili nel testo (ad esempio un allarme o una conferma) questa andrà affiancata da un testo riservato agli screen reader: <span class="sr-only">Testo alternativo</span>
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.
<div class="callout">
<div class="callout-title"><svg class="icon"><use href="./dist/svg/sprite.svg#it-info-circle"></use></svg><span class="sr-only">Confermato</span> Titolo callout</div>
<p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p>
</div>Al Callout può essere aggiunta una classe che determina il colore del bordo e del titolo. Le classi disponibili elencate qui di seguito.
Aggiungere la classe .success per indicare una procedura andata a buon fine.
Aggiungere la classe .warning per indicare una procedura o testo che richiede l’attenzione dell’utente.
Aggiungere la classe .danger per indicare un errore o una procedura pericolosa o non consentita.
Aggiungere la classe .note per caratterizzare il Callout come una nota.
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.
<div class="callout success">
<div class="callout-title"><svg class="icon"><use href="./dist/svg/sprite.svg#it-check-circle"></use></svg><span class="sr-only">Confermato</span> Titolo callout</div>
<p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p>
</div>
<div class="callout warning">
<div class="callout-title"><svg class="icon"><use href="./dist/svg/sprite.svg#it-help-circle"></use></svg><span class="sr-only">Confermato</span> Titolo callout</div>
<p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p>
</div>
<div class="callout danger">
<div class="callout-title"><svg class="icon"><use href="./dist/svg/sprite.svg#it-close-circle"></use></svg><span class="sr-only">Confermato</span> Titolo callout</div>
<p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p>
</div>
<div class="callout note">
<div class="callout-title"><svg class="icon"><use href="./dist/svg/sprite.svg#it-info-circle"></use></svg><span class="sr-only">Confermato</span> Titolo callout</div>
<p>Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.</p>
</div>