Explorer le système

Pour commencer

Accédez aux outils et aux éléments de base qui permettent de concevoir et de mettre au point des expériences cohérentes et accessibles.

Développer Conception

Listes de contenu

Les listes de contenu sont utilisées pour afficher des résultats de recherche ou des liens vers d’autres ressources.

Conseils

Les listes de contenu sont un moyen efficace de lister des éléments tels que des résultats de recherche, des articles, des publications et d’autres ressources. Il s’agit d’un outil de navigation. Les informations présentées dans une liste de contenu doivent décrire ce vers quoi l’élément de la liste dirige l’utilisateur. Les listes de contenu se composent des éléments suivants :

À faire

  • Rédigez des liens de titres courts et des descriptions concises.
  • Veillez à ce que les liens des listes ne dépassent pas 140 caractères, soit environ 20 mots.
  • Veillez à ce que les descriptions des listes ne dépassent pas 280 caractères, soit environ 40 mots.
  • Tronquez les liens et les descriptions s’ils dépassent les limites recommandées.
  • Assurez-vous que les liens et les descriptions correspondent aux titres et aux textes descriptifs des pages vers lesquelles ils dirigent l’utilisateur.
  • Utilisez une classe de lien externe si le lien de l’élément de la liste dirige l’utilisateur vers une page Web externe.
  • Ajoutez une pagination si la liste affiche plus de 12 résultats.

À ne pas faire

  • N’utilisez pas de listes sans descriptions.
  • N’ajoutez pas de liens intralignes dans les descriptions des liens.
  • N’ajoutez pas de boutons ou d’autres éléments au contenu de la liste.
  • N’ajoutez pas d’étiquettes ou de dates, à moins que cela n’apporte une valeur ajoutée à l’utilisateur.
  • Ne mélangez pas les types d’éléments de liste. Seul un type d’élément de liste peut être utilisé par liste.

Liste de contenu

HTML

<ul class="gnb-content-list">
    <li>
        <a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
        </p>
    </li>
    <li>
        <a class="external-link" href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
        </p>
    </li>
    <li>
        <a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
        </p>
    </li>
</ul>

Liste de contenu avec URL

HTML

<ul class="gnb-content-list">
    <li>
        <a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
        <p class="url">https://gnb.ca/sujet/titre/</p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
        </p>
    </li>
    <li>
        <a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
        <p class="url">https://gnb.ca/sujet/titre/</p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
        </p>
    </li>
    <li>
        <a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
        <p class="url">https://gnb.ca/sujet/titre/</p>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
        </p>
    </li> 
</ul>

Liste de contenu avec méta-informations

Catégorie

HTML

<ul class="gnb-content-list">
    <li>
        <p class="gnb-label">Catégorie</p>
        <a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
        </p>
    </li>
</ul>

Date

HTML

<ul class="gnb-content-list">
    <li>
        <p class="gnb-date">17 mai 2024</p>
        <a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
        </p>
    </li>
</ul>

Catégorie et date

HTML

<ul class="gnb-content-list">
    <li>
        <p class="gnb-label">Catégorie</p>
        <p class="gnb-date">17 mai 2024</p>
        <a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
        </p>
    </li>
</ul>

Étiquettes

HTML

<ul class="gnb-content-list">
    <li>
        <a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
        <p>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
        </p>
        <p>
            <a class="gnb-tag" href="">Étiquette de lien</a>
            <a class="gnb-tag" href="">Étiquette de lien</a>
            <a class="gnb-tag" href="">Étiquette de lien</a>
        </p>
    </li>
</ul>

Liste de contenu avec images

HTML

<ul class="gnb-content-list-img">
    <li>
        <div class="img">
            <img src="img/votre-image.png" alt="Description de l'image" />
        </div>
        <div class="content">
            <p class="gnb-date">17 mai 2024</p>
            <a href="#">Lorem ipsum dolor sit amet consectetur adipiscing</a>
            <p>
                Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eu tincidunt ipsum. Etiam tempus vulputate enim, id fermentum magna tempus ut.
            </p>
        </div>
    </li>
    <li>...</li>
</ul>