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>
<div class="it-right-zone"><span class="text">Testo e <a href="#">link</a></span></div>
</li>
<li>
<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>
<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>
<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">
<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">
<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
L’elemento .it-thumb 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">
<li>
<div class="d-flex justify-content-center align-items-center">
<div class="it-thumb"><img src="https://via.placeholder.com/40x40.png?text=40x40" alt="image alt" title="image title"></div>
<div class="it-right-zone"><span class="text">Testo e <a href="#">link</a></span></div>
</div>
</li>
<li>
<div class="d-flex justify-content-center align-items-center">
<div class="it-thumb"><img src="https://via.placeholder.com/40x40.png?text=40x40" alt="image alt" title="image title"></div>
<div class="it-right-zone"><span class="text active">Testo e <a href="#">link</a> attivo</span></div>
</div>
</li>
</ul>
</div>