Unito.it

Tema Unito v3

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 contenitore <div> con classe .callout-inner contenente a sua volta un titolo contenuto in un <div> con classe .callout-title. A seguire il testo del contenuto principale del Callout incluso in uno o più tag.

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="visually-hidden">Testo alternativo</span>

La classe visually-hidden sotituisce in Bootstrap5 la classe sr-only.
Il tema garantisce compatibilità all'indietro, renderizzando sr-only - se ancora presente - in maniera analoga a visually-hidden

Titolo callout

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-inner">
    <div class="callout-title">
      <svg class="icon"><use href="./dist/svg/sprite.svg#it-info-circle"></use></svg>
      <span class="visually-hidden">Confermato</span> 
      <span class="text">Titolo callout</span>
    </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>

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.

TITOLO CALLOUT

Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.

TITOLO CALLOUT

Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.

TITOLO CALLOUT

Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.

TITOLO CALLOUT

Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.

<div class="callout success">
  <div class="callout-inner">
    <div class="callout-title">
      <svg class="icon"><use href="./dist/svg/sprite.svg#it-check-circle"></use></svg>
      <span class="visually-hidden">TITOLO CALLOUT</span> 
      <span class="text">TITOLO CALLOUT</span>    
    </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>
<div class="callout warning">
  <div class="callout-inner">
    <div class="callout-title">
      <svg class="icon"><use href="./dist/svg/sprite.svg#it-help-circle"></use></svg>
      <span class="visually-hidden">TITOLO CALLOUT</span> 
      <span class="text">TITOLO CALLOUT</span>
    </div>
    <p>Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.</p>
  </div>
</div>
<div class="callout danger">
  <div class="callout-inner">
    <div class="callout-title">
      <svg class="icon"><use href="./dist/svg/sprite.svg#it-close-circle"></use></svg>
      <span class="visually-hidden">TITOLO CALLOUT</span> 
      <span class="text">TITOLO CALLOUT</span>
    </div>
    <p>Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.</p>
  </div>
</div>
<div class="callout note">
  <div class="callout-inner">
    <div class="callout-title">
      <svg class="icon"><use href="./dist/svg/sprite.svg#it-info-circle"></use></svg>
      <span class="visually-hidden">TITOLO CALLOUT</span> 
      <span class="text">TITOLO CALLOUT</span>
    </div>
    <p>Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.</p>
  </div>
</div>
Torna su