Liste de liens-blocs

Dans cette page :

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 le composant « liste de liens-blocs » idéal 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. Les principes de rédaction des libellés doivent être respectés. Ils sont indiqués dans le guide de rédaction.

Si le lien est un lien externe, il doit être suivi d’une icône de sortie et accompagné du texte alternatif suivant : « Cet hyperlien s’ouvrira dans une nouvelle fenêtre. »

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

État par défaut

Développement du territoire nordique

HTML

<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>

CSS

.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;
}

État au survol