1. Accueil  
  2. Composantes  
  3. Navigation  
  4. Liste de liens-blocs

Liste de liens-blocs

Les listes de liens-blocs comportent une série d’hyperliens mis en valeur. Ces liens occupent visuellement plus d’espace et ils sont donc plus faciles à taper sur les appareils tactiles. Cela rend la composante «liste de liens-blocs» idéale pour afficher une série de plusieurs hyperliens. Les listes se trouvent dans le contenu principal d’une page et peuvent mener vers des pages internes ou externes.

Exemple


Quand l'utiliser

Utiliser des listes de liens-blocs pour présenter aux utilisateurs une liste d'actions recommandées ou du contenu pertinent en fonction du contexte. Ne pas l’utiliser:

  • pour les pages dont les contenus ne sont pas liés. Cela pourrait prêter à confusion ;
  • dans un service transactionnel ou un formulaire ;
  • pour remplacer un menu-ancre et faire des liens vers du contenu sur la même page. Pour cela, il faut utiliser le menu-ancres.

Comment l'utiliser

Le libellé d’un lien doit être compréhensible hors de son contexte. Utilisez le guide de rédaction pour la rédaction de vos libellés. Selon leur nature de lien interne ou lien externe, ils sont suivis ou non d’une icône.

Informations techniques

Espacements

Le dégagement est de 8 px à gauche et de 16 px à droite. Il est de 16 px en haut et en bas, incluant les lignes horizontales.

L’icône de flèche est placée tout à droite, son côté droit touche au dégagement de droite de 16 px susmentionné.

À la gauche de l’icône de flèche, il y a un dégagement de 8 px afin que le texte soit dégagé de l’icône.

Dimensions

Les liens-blocs occupent toute la largeur disponible de la zone de contenu dans laquelle ils sont.

Un lien-bloc fait 56 px de haut en incluant les 2 lignes horizontales.

L’icône de flèche fait 16 px de large par 12 px de haut.

Alignement

Le texte du lien est toujours aligné à gauche.

L’icône de flèche est toujours alignée verticalement au centre du lien-bloc.

À ne pas faire


À faire


États

<div class="liste-liens-blocs">
    <ul>
        <li>
            <a href="#">Développement du territoire nordique</a>
        </li>
        <li>
            <a href="#">Plan d’action pour contrer les impacts sur les femmes en contexte de pandémie</a>
        </li>
        <li>
            <a href="#">Droits de la personne</a>
        </li>
        <li>
            <a href="#">La place 0-5 pour inscrire vos enfants dans un service de garde</a>
        </li>
    </ul>
</div>

.liste-liens-blocs ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
    max-width: 832.5px /*9 colonnes*/;
}

.liste-liens-blocs li {
    margin: 0;
    border-bottom: 1px solid #c5cad2;
}

.liste-liens-blocs ul {
    border-top: 1px solid #c5cad2;
}

.liste-liens-blocs a {
    font-size: 16px;
    line-height: 24px;
    display: flex;
    padding: 16px 40px 15px 8px;
    text-decoration: none;
    color: #095797;
    background-image: url("data:image/svg+xml,%3C%3Fxml version='1.0' encoding='utf-8'%3F%3E%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='12' viewBox='0 0 16 12'%3E%3Cpath id='fleche-suivant' d='M15.669,7.267c-.01-.011-.014-.026-.025-.037L10.707,2.293A1,1,0,1,0,9.293,3.707L12.586,7H1A1,1,0,1,0,1,9H12.586L9.293,12.293a1,1,0,1,0,1.414,1.414L15.644,8.77c.011-.011.015-.026.025-.037a.977.977,0,0,0,0-1.466Z' transform='translate(0 -2)' fill='%23223654'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: calc(100% - 16px) center;
    justify-content: space-between;
    align-items: center;
}

.liste-liens-blocs li:first-child a {
    padding: 15px 40px 15px 8px;
}

.liste-liens-blocs a:hover {
    background-color: #f9f8f8;
    text-decoration: underline;
}

.liste-liens-blocs a:focus {
    outline: solid 2px #4a98d9;
    outline-offset: 0;
}

Dernière mise à jour : 15 septembre 2022