Items list (Liste de liens)

Les listes de liens permettent de présenter à l’utilisateur une série de liens présentée sous forme de liste verticale.

Usage

Une liste de liens met en avant des liens sous forme d’un bloc. Le plus souvent, ces liens sont annexes au contenu en cours de consultation et sont apparentés d’une façon ou d’une autre à celui-ci.

  • Attention, ce composant n’est pas à utiliser pour construire un menu.
  • Chaque lien est un composant Links de type « lien par défaut ».
  • Chaque lien peut être précédé d’une icône.
  • Il est possible de supprimer « la ligne » en dessous du dernier élément d’une liste.

Bonnes pratiques

  • Un titre de type contenu non éditorial de niveau 2 est généralement présent au-dessus de ce composant liste de liens afin de définir à quoi correspond cette liste.
  • Dans une liste de liens, le nombre de liens est de 2 à 6 maximum.

Style & code

Dépendances :

Le composant « liste de liens » consiste en une simple liste HTML avec des liens dans chaque <li>, plus éventuellement une icône.

Standard

Pour construire ce composant il suffit de créer une liste avec la classe su-items-list sur le <ol> et de mettre des liens dans les <li>. Cette liste peut être construite indifféremment avec la balise <ul> ou la balise <ol>, il s’agit juste d’un point de vue sémantique : la liste comporte-t-elle une notion d’ordonnancement ? Si oui, préférez <ol>…

<ol class="su-items-list">
    <li><a href="javascript:;">Lien 1</a></li>
    <li><a href="javascript:;">Lien 2</a></li>
    <li><a href="javascript:;">Lien 3</a></li>
    <li><a href="javascript:;">Lien 4</a></li>
    <li><a href="javascript:;">Lien 5 avec texte long. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</a></li>
    <li><a href="javascript:;">Lien 6</a></li>
</ol>

Avec icônes

Il est possible d’ajouter un pictogramme devant le lien. Ce peut être une icône issue de la fonte d’icône de SipaUI, un SVG inline (dont le code est inclus directement dans le HTML) ou un drapeau SipaUI.

Avec icône SipaUI

<ol class="su-items-list">
    <li><a href="javascript:;"><i class="su-icon">podcast</i>Lien 1</a></li>
    <li><a href="javascript:;"><i class="su-icon">calendrier</i>Lien 2</a></li>
    <li><a href="javascript:;"><i class="su-icon">galerie</i>Lien 3</a></li>
</ol>

Avec SVG inline

<ol class="su-items-list">
    <li><a href="javascript:;">
            <svg viewBox="0 0 17 24" width="17" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd">
            <path d="M14.348 2.399C12.677.847 10.72.035 8.5.035c-2.387 0-4.416.836-5.872 2.387C1.076 4.092.265 6.05.265 8.271c0 1.073.19 2.123.526 2.911l.023.048c.024.024 1.695 3.151 3.39 6.206C7.832 24 7.951 24 8.5 24c.549 0 .669 0 4.297-6.564 1.694-3.079 3.365-6.182 3.388-6.206l.025-.048c.334-.788.525-1.838.525-2.911 0-2.364-.835-4.393-2.387-5.872zm.549 8.21c-2.005 3.748-5.156 9.5-6.397 11.506-1.241-2.03-4.391-7.758-6.397-11.506-.262-.62-.406-1.456-.406-2.315 0-1.838.669-3.485 1.957-4.869C4.848 2.135 6.495 1.491 8.5 1.491c1.838 0 3.485.67 4.87 1.958 1.289 1.194 1.933 2.84 1.933 4.845 0 .86-.144 1.694-.406 2.315z"/>
            <path d="M8.5 3.807c-1.218 0-2.244.43-3.127 1.337-.907.906-1.336 1.933-1.336 3.127 0 1.217.429 2.242 1.336 3.126.908.907 1.934 1.337 3.127 1.337 1.218 0 2.244-.43 3.126-1.337.908-.907 1.337-1.934 1.337-3.126 0-1.218-.43-2.244-1.337-3.127-.882-.907-1.908-1.337-3.126-1.337zm2.125 6.612c-.62.62-1.313.906-2.125.906-.835 0-1.503-.285-2.124-.906-.62-.62-.907-1.313-.907-2.125 0-.835.287-1.504.907-2.125.62-.62 1.312-.906 2.124-.906s1.504.286 2.125.906c.62.62.906 1.313.906 2.125s-.286 1.48-.906 2.125z"/>
            </svg>Lien 1</a>
    </li>
    <li><a href="javascript:;">
        <svg viewBox="0 0 17 24" width="17" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd">
        <path d="M14.348 2.399C12.677.847 10.72.035 8.5.035c-2.387 0-4.416.836-5.872 2.387C1.076 4.092.265 6.05.265 8.271c0 1.073.19 2.123.526 2.911l.023.048c.024.024 1.695 3.151 3.39 6.206C7.832 24 7.951 24 8.5 24c.549 0 .669 0 4.297-6.564 1.694-3.079 3.365-6.182 3.388-6.206l.025-.048c.334-.788.525-1.838.525-2.911 0-2.364-.835-4.393-2.387-5.872zm.549 8.21c-2.005 3.748-5.156 9.5-6.397 11.506-1.241-2.03-4.391-7.758-6.397-11.506-.262-.62-.406-1.456-.406-2.315 0-1.838.669-3.485 1.957-4.869C4.848 2.135 6.495 1.491 8.5 1.491c1.838 0 3.485.67 4.87 1.958 1.289 1.194 1.933 2.84 1.933 4.845 0 .86-.144 1.694-.406 2.315z"/>
        <path d="M8.5 3.807c-1.218 0-2.244.43-3.127 1.337-.907.906-1.336 1.933-1.336 3.127 0 1.217.429 2.242 1.336 3.126.908.907 1.934 1.337 3.127 1.337 1.218 0 2.244-.43 3.126-1.337.908-.907 1.337-1.934 1.337-3.126 0-1.218-.43-2.244-1.337-3.127-.882-.907-1.908-1.337-3.126-1.337zm2.125 6.612c-.62.62-1.313.906-2.125.906-.835 0-1.503-.285-2.124-.906-.62-.62-.907-1.313-.907-2.125 0-.835.287-1.504.907-2.125.62-.62 1.312-.906 2.124-.906s1.504.286 2.125.906c.62.62.906 1.313.906 2.125s-.286 1.48-.906 2.125z"/>
        </svg>Lien 2</a>
    </li>
    <li><a href="javascript:;">
        <svg viewBox="0 0 17 24" width="17" height="24" xmlns="http://www.w3.org/2000/svg" xmlns:serif="http://www.serif.com/" fill-rule="evenodd">
        <path d="M14.348 2.399C12.677.847 10.72.035 8.5.035c-2.387 0-4.416.836-5.872 2.387C1.076 4.092.265 6.05.265 8.271c0 1.073.19 2.123.526 2.911l.023.048c.024.024 1.695 3.151 3.39 6.206C7.832 24 7.951 24 8.5 24c.549 0 .669 0 4.297-6.564 1.694-3.079 3.365-6.182 3.388-6.206l.025-.048c.334-.788.525-1.838.525-2.911 0-2.364-.835-4.393-2.387-5.872zm.549 8.21c-2.005 3.748-5.156 9.5-6.397 11.506-1.241-2.03-4.391-7.758-6.397-11.506-.262-.62-.406-1.456-.406-2.315 0-1.838.669-3.485 1.957-4.869C4.848 2.135 6.495 1.491 8.5 1.491c1.838 0 3.485.67 4.87 1.958 1.289 1.194 1.933 2.84 1.933 4.845 0 .86-.144 1.694-.406 2.315z"/>
        <path d="M8.5 3.807c-1.218 0-2.244.43-3.127 1.337-.907.906-1.336 1.933-1.336 3.127 0 1.217.429 2.242 1.336 3.126.908.907 1.934 1.337 3.127 1.337 1.218 0 2.244-.43 3.126-1.337.908-.907 1.337-1.934 1.337-3.126 0-1.218-.43-2.244-1.337-3.127-.882-.907-1.908-1.337-3.126-1.337zm2.125 6.612c-.62.62-1.313.906-2.125.906-.835 0-1.503-.285-2.124-.906-.62-.62-.907-1.313-.907-2.125 0-.835.287-1.504.907-2.125.62-.62 1.312-.906 2.124-.906s1.504.286 2.125.906c.62.62.906 1.313.906 2.125s-.286 1.48-.906 2.125z"/>
        </svg>Lien 3</a>
    </li>
</ol>

N. B. 1 – SipaUI redéfini la couleur des SVG afin d’avoir des pictos de couleur cohérente. Toutefois, si vous intégrez des logos, cela posera problème. Il vous faudra alors ajouter la classe su-preserve-colors sur la liste, à côté de su-items-list pour éviter ce problème.

N. B. 2 – SipaUI redéfini la taille des SVG afin d’avoir des pictos de taille cohérente. Toutefois, si vous voulez intégrer des icônes d’une autre taille, cela posera problème. Il vous faudra alors ajouter la classe su-preserve-size sur la liste, à côté de su-items-list pour éviter ce problème.

Avec des drapeaux

<ol class="su-items-list">
    <ol class="su-items-list">
        <li>
            <a href="javascript:;" class="surcharge-storybook su-truncate-1"><span class="su-flag-ni"></span>Nicaragua</a>
        </li>
        <li>
            <a href="javascript:;" class="surcharge-storybook su-truncate-1"><span class="su-flag-ad"></span>Andorre</a>
        </li>
        <li>
            <a href="javascript:;" class="surcharge-storybook su-truncate-1"><span class="su-flag-fr"></span>France</a>
        </li>
    </ol>
</ol>

Avec troncature

Vous pouvez forcer une hauteur de ligne maximum avec troncature en ajoutant l’une de ces 3 classes : su-truncate-1, su-truncate-2, ou su-truncate-3 sur le contenu texte.

<div style="width: 200px">
    <ol class="su-items-list">
        <li><a href="javascript:;" class="su-truncate-1">Lien long 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></li>
        <li><a href="javascript:;" class="su-truncate-1">Lien 2</a></li>
        <li><a href="javascript:;" class="su-truncate-1">Lien long 3 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</a></li>
    </ol>
</div>

Sans séparateur de fin

Vous pouvez supprimer le séparateur de fin en ajoutant la classe su-no-ending-separator à côté de la classe su-items-list.

<ol class="su-items-list su-no-ending-separator">
    <li><a href="javascript:;">Lien long 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></li>
    <li><a href="javascript:;">Lien 2</a></li>
    <li><a href="javascript:;">Lien long 3 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</a></li>
</ol>

En colonnes

Il est possible d’afficher la liste de liens en colonnes (tout le temps ou juste en desktop, cf. les Helpers) en ajoutant les classes su-columns-… ou su-columns-desktop-… (où « … » est un chiffre entre 2 et 4) à côté de la classe su-items-list.

<ol class="su-items-list su-columns-3">
    <li><a href="javascript:;">Lien long 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></li>
    <li><a href="javascript:;">Lien 2</a></li>
    <li><a href="javascript:;">Lien long 3 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</a></li>
    <li><a href="javascript:;">Lien 4</a></li>
    <li><a href="javascript:;">Lien long 5 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</a></li>
    <li><a href="javascript:;">Lien long 6 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></li>
</ol>

Exemple en colonnes avec troncature et suppression de la dernière séparation de la colonne 

<ol class="su-items-list su-columns-4 su-no-ending-separator">
    <li><a href="javascript:;" class="surcharge-storybook su-truncate-1">Lien long 1 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></li>
    <li><a href="javascript:;" class="surcharge-storybook su-truncate-1">Lien 2</a></li>
    <li><a href="javascript:;" class="surcharge-storybook su-truncate-1">Lien long 3 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</a></li>
    <li><a href="javascript:;" class="surcharge-storybook su-truncate-1">Lien 4</a></li>
    <li><a href="javascript:;" class="surcharge-storybook su-truncate-1">Lien long 5 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</a></li>
    <li><a href="javascript:;" class="surcharge-storybook su-truncate-1">Lien long 6 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></li>
    <li><a href="javascript:;" class="surcharge-storybook su-truncate-1">Lien long 7 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</a></li>
    <li><a href="javascript:;" class="surcharge-storybook su-truncate-1">Lien 8</a></li>
    <li><a href="javascript:;" class="surcharge-storybook su-truncate-1">Lien long 9 Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</a></li>
    <li><a href="javascript:;" class="surcharge-storybook su-truncate-1">Lien long 10 Lorem ipsum dolor sit amet, consectetur adipisicing elit.</a></li>
</ol>

Liste des classes disponibles

  • su-items-list
  • su-no-ending-separator
  • su-preserve-colors

Classes annexes

Le code a bien été copié !