Liste d'objets
La forme la plus simple pour afficher des liens vers une collection d'objets du même type est la liste de liens, elle donne une zone cliquable importante, tant sur la hauteur avec un certain padding, que sur la largeur en permettant le clic sur tout la largeur de la ligne :
<ul class="objects-list single-links"> <li><a href="#">Lorem ipsum dolor sit amet</a></li> <li><a href="#">Cum te partem docendi gubergren</a></li> <li><a href="#">Ei vis labore timeam</a></li> <li><a href="#">Cu cum velit ridens assueverit</a></li> <li><a href="#">Mei quis mutat nominati id</a></li> </ul>
Badges
Pour pointer une information supplémentaire à une ligne il est possible d'inclure un « badge », simplement un élément span avec la classe badge.
<ul class="objects-list single-links"> <li><a href="#">Lorem ipsum dolor sit amet</a></li> <li><a href="#">Cum te partem docendi gubergren</a> <span class="badge">3</span></li> <li><a href="#">Ei vis labore timeam</a></li> <li><a href="#">Cu cum velit ridens assueverit</a></li> <li><a href="#">Mei quis mutat nominati id</a></li> </ul>
Actions
Pour ajouter un lien d’action à la droite de l’élément, la classe link-action-icon peut être utilisée. Elle peut se coupler avec la classe delete pour obtenir une icône de suppression.
<ul class="objects-list single-links"> <li><a href="#">Lorem ipsum dolor sit amet</a></li> <li><a href="#">Cum te partem docendi gubergren</a></a><a href="" class="link-action-icon delete">supprimer</a></li> <li><a href="#">Ei vis labore timeam</a></li> <li><a href="#">Cu cum velit ridens assueverit</a></li> <li><a href="#">Mei quis mutat nominati id</a></li> </ul>
Informations additionnelles
Pour ajouter des informations supplémentaires, moins importantes que le libellé du lien, la classe extra-info est prévue.
<ul class="objects-list single-links"> <li><a href="#">Lorem ipsum dolor <span class="extra-info">- sit amet</span></a></li> <li><a href="#">Cum te partem <span class="extra-info">- docendi gubergren</span></a> <li><a href="#">Ei vis labore timeam</a></li> <li><a href="#">Cu cum velit <span class="extra-info">- ridens assueverit</span></a></li> <li><a href="#">Mei quis mutat nominati id</a></li> </ul>