Lists (Listes)

Les listes sont composées de contenus associés, regroupés et organisés. Elles peuvent contenir du texte, des liens, etc.

Usage

Les listes sont utilisées pour afficher un nombre d’éléments reliés de façon consécutive. Ceux-ci s’affichent l’un en dessous de l’autre.

Types

Liste non ordonnée

Dans une liste non ordonnée, l’ordre des éléments n’importe pas.
Une puce d’apparence constante est présente devant chaque ligne d’un même niveau d’imbrication.
L’aspect de la puce change avec le niveau d’imbrication.

Liste ordonnée

Les éléments d’une liste ordonnée sont disposés dans un ordre précis.
Un numéro suivi d’un point est placé devant chaque ligne.
Afin de faciliter la lecture, les points sont alignés verticalement et les chiffres sont ferrés à droite.

Les listes imbriquées

L’imbrication des listes permet une présentation claire et détaillée grâce à un deuxième niveau aux listes non ordonnées et ordonnées.
Les listes imbriquées sont utilisées pour des listes de liens hiérarchisés tels qu’un plan de site ou menu déroulant.
Dans une liste ordonnée et imbriquée, le nombre d’éléments est limité à 26 : de « a » à « z ».

Bonnes pratiques

Les listes présentent des informations simples et courtes.
Les listes doivent être triées de manière logique pour faciliter l’analyse du contenu, par exemple alphabétique, numérique, chronologique ou par préférence pour l’utilisateur.

Style & code

Dépendances :

Classe sipaui sur un parent (par exemple le <body>).

Une liste peut correspondre à un besoin d’affichage de texte, ou à un besoin d'une suite d’éléments dans le code HTML. Dans ce second cas, la liste ne doit pas avoir une apparence de liste texte. Le premier cas est une liste éditoriale (ordonnée ou non) et le second est une liste non éditoriale.

Par défaut, si elles sont incluses dans un bloc défini avec la classe sipaui les listes HTML <ul> et <ol> ne sont pas stylées comme une liste éditoriale (liste texte). Cela permet donc d’utiliser des listes d’objets dans les pages sans avoir besoin de les surcharger à chaque fois en CSS pour leur enlever leur style de liste de texte. Si l’on a quand même besoin de rendre une liste éditoriale en dehors d’une zone éditoriale, on peut utiliser la classe su-list pour forcer cet affichage.

À l’inverse, ces mêmes balises HTML généreront bien une liste texte si elles sont dans une zone éditoriale (avec la classe su-article). On peut alors utiliser la classe su-not-list sur ces balises de liste si on veut contourner ce comportement.

SipaUI gère 2 niveaux d’imbrication de liste et (comme dit plus haut), dans une liste ordonnée imbriquée en second niveau, le nombre d’éléments est limité à 26 : de « a » à « z ».

Zone non éditoriale

En dehors d’un article utilisant la classe su-article.

Liste non ordonnée

<ul>
    <li>Item 1</li>
    <li>Item 2 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
    <li>Item 3</li>
    <li>Item 4
        <ul>
            <li>Item 4.1</li>
            <li>Item 4.2 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.</li>
        </ul>
    </li>
</ul>

Liste ordonnée

<ol>
    <li>Item 1</li>
    <li>Item 2 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
    <li>Item 3</li>
    <li>Item 4
        <ol>
            <li>Item 4.1</li>
            <li>Item 4.2 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.</li>
        </ol>
    </li>
</ol>

Liste non ordonnée avec une apparence de liste à puces

Utiliser la classe su-list sur la liste.

<ul class="su-list">
    <li>Item 1</li>
    <li>Item 2 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
    <li>Item 3</li>
    <li>Item 4
        <ul>
            <li>Item 4.1</li>
            <li>Item 4.2 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.</li>
        </ul>
    </li>
</ul>

Liste ordonnée avec une apparence de liste texte

Utiliser la classe su-list sur la liste.

<ol class="su-list">
    <li>Item 1</li>
    <li>Item 2 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
    <li>Item 3</li>
    <li>Item 4
        <ol>
            <li>Item 4.1</li>
            <li>Item 4.2 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.</li>
        </ol>
    </li>
</ol>

Zone éditoriale

Dans un article avec la classe su-article.

Liste non ordonnée

<div class="su-article">
    <ul>
        <li>Item 1</li>
        <li>Item 2 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>Item 3</li>
        <li>Item 4
            <ul>
                <li>Item 4.1</li>
                <li>Item 4.2 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.</li>
            </ul>
        </li>
    </ul>
</div>

Liste ordonnée

<div class="su-article">
    <ol>
        <li>Item 1</li>
        <li>Item 2 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>Item 3</li>
        <li>Item 4
            <ol>
                <li>Item 4.1</li>
                <li>Item 4.2 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.</li>
            </ol>
        </li>
    </ol>
</div>

Liste non ordonnée sans affichage en liste à puces.

Utiliser la classe su-not-list sur la liste. Comme vous pouvez le voir, la liste imbriqué garde l’apparence de liste éditoriale et ce comporte comme si elle était le 1er niveau de liste. Si vous voulez aussi supprimer cette apparence, il vous faudra mettre cette classe aussi sur cette <ul>.

<div class="su-article">
    <ul class="su-not-list">
        <li>Item 1</li>
        <li>Item 2 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>Item 3</li>
        <li>Item 4
            <ul>
                <li>Item 4.1</li>
                <li>Item 4.2 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.</li>
            </ul>
        </li>
    </ul>
</div>

Sur fond sombre

Si une liste doit s’afficher sur un fond sombre, il est possible de la passer en clair en ajoutant la classe su-negative sur le ul ou sur un parent, que ce soit dans un article ou non.

<div class="su-negative" style="background: DimGray; padding: 10px">
    <h2 style="font-weight: 300">Zone non-éditoriale</h2>
    <ul class="su-list">
        <li>Item 1</li>
        <li>Item 2 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>Item 3</li>
        <li>Item 4
            <ul>
                <li>Item 4.1</li>
                <li>Item 4.2 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.</li>
            </ul>
        </li>
    </ul>
</div>
<div class="su-article su-negative" style="background: DimGray; padding: 10px">
    <h2>Zone éditoriale</h2>
    <ul>
        <li>Item 1</li>
        <li>Item 2 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. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</li>
        <li>Item 3</li>
        <li>Item 4
            <ul>
                <li>Item 4.1</li>
                <li>Item 4.2 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.</li>
            </ul>
        </li>
    </ul>
</div>

Liste des classes disponibles

su-article (zone éditoriale d’un détail complet)
su-list (si besoin de surcharge hors article)
su-not-list (si besoin de surcharge dans un article)
su-negative