Liste
La lista è un componente flessibile per la visualizzazione di liste con testo, link o elementi correlati.
Lista semplice solo testo
<div class="it-list-wrapper">
<ul class="it-list">
<li class="list-item">
<div class="it-right-zone"><span class="text">Testo e <a href="#">link</a></span></div>
</li>
<li class="list-item">
<div class="it-right-zone"><span class="text active">Testo e <a href="#">link</a> attivo</span></div>
</li>
</ul>
</div> Lista con avatar
L’elemento .avatar precede l’elemento .it-right-zone che contiene il testo.
<div class="it-list-wrapper">
<ul class="it-list">
<li class="list-item">
<div class="d-flex justify-content-center align-items-center">
<div class="avatar size-lg"><img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri"></div>
<div class="it-right-zone"><span class="text">Testo e <a href="#">link</a></span></div>
</div>
</li>
<li class="list-item">
<div class="d-flex justify-content-center align-items-center">
<div class="avatar size-lg"><img src="https://randomuser.me/api/portraits/women/41.jpg" alt="Anna Barbieri"></div>
<div class="it-right-zone"><span class="text active">Testo e <a href="#">link</a> attivo</span></div>
</div>
</li>
</ul>
</div> Lista con icona
L’elemento .it-rounded-icon con all’interno il relativo SVG, precede l’elemento .it-right-zone che contiene il testo.
<div class="it-list-wrapper">
<ul class="it-list">
<div class="d-flex justify-content-center align-items-center list-item">
<div class="it-rounded-icon">
<svg class="icon">
<use xlink:href="./dist/svg/sprite.svg#it-folder"></use>
</svg>
</div>
<div class="it-right-zone"><span class="text">Testo e <a href="#">link</a></span></div>
</div>
<div class="d-flex justify-content-center align-items-center list-item">
<div class="it-rounded-icon">
<svg class="icon">
<use xlink:href="./dist/svg/sprite.svg#it-folder"></use>
</svg>
</div>
<div class="it-right-zone"><span class="text active">Testo e <a href="#">link</a> attivo</span></div>
</div>
</ul>
</div> Lista con immagine
La lista con immagine è una variante della lista ottenuta tramite l'uso di utility classes, che offre più risalto per il contenuto visivo e per le informazioni descrittive del contenuto.
Il comportamento responsive del componente è determinato dall'uso delle classi .flex-column e .flex-md-row che assieme alle classi di griglia .col utilizzate, risultano - nel codice in esempio - con l'immagine affiancata a partire dal Breakpoint MD, prima del quale l'immagine viene visualizzata al di sopra del testo descrittivo.
-
Da Lunedì 22 Maggio 2023 a Martedì 23 Maggio 2023
Diretta streaming su Unito media della seduta del Consiglio di Amministrazione
<div class="it-list-wrapper">
<ul class="it-list">
<li>
<div class="list-item pt-2 pb-2 flex-md-row flex-column">
<div class="col-12 col-md-3">
<img src="https://dummyimage.com/434x256/ebebeb/808080/?text=434x256"
alt="image alt" title="image title" class="img-fluid">
</div>
<div class="it-right-zone col-12 col-md-9 ml-0 pl-2">
<div>
<p class="fs-smaller mb-1 w-100">Da Lunedì 22 Maggio 2023 a Martedì 23 Maggio 2023</p>
<a href="#" class="" data-focus-mouse="false">
<span class="text">Diretta streaming su Unito media della seduta del Consiglio di Amministrazione</span>
</a>
</div>
<div>
<span class="it-multiple">
<a href="#" aria-label="Link">
<svg class="icon"><use href="./dist/svg/sprite.svg#it-chevron-right"></use></svg>
</a>
</span>
</div>
</div>
</div>
</li>
</ul>
</div> Lista di link
L’elemento .it-multiple con all’interno le relative icone, segue l’elemento .text.
<div class="it-list-wrapper">
<ul class="it-list">
<li>
<div class="list-item" href="#">
<div class="it-right-zone">
<a href="#" class="" data-focus-mouse="false">
<span class="text">Link<em>Lorem ipsum dolor sit amet.</em></span>
</a>
<span class="it-multiple">
<a href="#" aria-label="Link">
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
</a>
</span>
</div>
</div>
</li>
<li>
<div class="list-item" href="#">
<div class="it-right-zone">
<a href="#" class="" data-focus-mouse="false">
<span class="text">Link<em>Lorem ipsum dolor sit amet.</em></span>
</a>
<span class="it-multiple">
<a href="#" aria-label="Link">
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
</a>
</span>
</div>
</div>
</li>
<li>
<div class="list-item" href="#">
<div class="it-right-zone">
<a href="#" class="" data-focus-mouse="false">
<span class="text">Link<em>Lorem ipsum dolor sit amet.</em></span>
</a>
<span class="it-multiple">
<a href="#" aria-label="Link">
<svg class="icon">
<use href="./dist/svg/sprite.svg#it-chevron-right"></use>
</svg>
</a>
</span>
</div>
</div>
</li>
</ul>
</div>