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
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.
Maecenas vulputate ante dictum vestibulum volutpat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean non augue non purus vestibulum varius.
Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.
Quisque ex eros, pellentesque vitae enim sed, pharetra tempus dolor. Donec eu nibh ac lacus luctus pellentesque. Duis interdum scelerisque magna nec malesuada.
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>Callout Avviso - Solo Versione 3.1
ultimo aggiornamento 17/10/24
Questa variante del callout, caratterizzata dalla classe .avviso associata alla classe principale .callout viene utilizzata per visualizzare messaggi di servizio o altre informazioni.
<div class="callout avviso">
<div class="callout-inner">
<div class="callout-title">
<span class="text">Lunedì 13 Maggio 2024: interruzione temporanea di alcuni servizi online della MyUniTo</span>
</div>
<div class="text-center mt-3 mb-3">
<a class="btn btn-outline-primary" href="#" role="button" title="Lorem Ipsum">
<div class="d-flex w-100 h-100 align-items-center">Leggi avviso
<svg role="img" aria-labelledby="button_tit1" class="icon icon-xs ml-2">
<title id="button_tit1">Titolo</title>
<use href="./dist/svg/sprite.svg#it-arrow-right"></use>
</svg>
</div>
</a>
</div>
</div>
</div>La classe aggiuntiva .full associata alla due classi appena descritte viene invece utilizzata per la versione estesa dell'avviso.
Avviso
Si informa che il parcheggio a raso rimarrà chiuso nelle giornate di sabato per tutto il mese di agosto (3, 10, 17, 24 e 31)
Nelle altre settimane, sarà disponibile dal lunedì al venerdì, in orario 7:15-20:15.
Per quanto riguarda l'utilizzo dei parcheggi coperti, dal lunedì al venerdì, l'accesso sarà consentito esclusivamente da Viale O. M. Mai, 33/A, con orario, 7:15-20:15.
Con l'occasione, vista la riduzione del personale di presidio nel mese di agosto, si ricorda il numero di Sicuritalia Tel. 345 9703175, sempre attivo, a cui rivolgersi in caso di difficoltà, problemi e ecc...
<div class="callout avviso full">
<div class="callout-inner">
<div class="row callout-title">
<div class="col-6 text-start"><h4>Avviso</h4></div>
<div class="col-6 text-end">Data di pubblicazione: <strong>31 Luglio 2024</strong></div>
</div>
<div class="text-center mt-3 mb-3">
<p>
Si informa che il <strong>parcheggio a raso</strong> rimarrà chiuso nelle giornate di sabato per tutto il mese di agosto (3, 10, 17, 24 e 31) <stronge per l'intera settimana che va dal 10 al 18 di agosto</strong>.
<br>Nelle altre settimane, sarà disponibile dal lunedì al venerdì, in orario 7:15-20:15.<br>
Per quanto riguarda l'utilizzo dei <strong>parcheggi coperti</strong>, dal lunedì al venerdì, l'accesso sarà consentito esclusivamente da Viale O. M. Mai, 33/A, con orario, 7:15-20:15.<br>
Con l'occasione, vista la riduzione del personale di presidio nel mese di agosto, si ricorda il numero di Sicuritalia Tel. <a href="#" title="Lorem Ipsum">345 9703175</a>, sempre attivo, a cui rivolgersi in caso di difficoltà, problemi e ecc...
</p>
</div>
</div>
</div>