Dernière mise à jour : 5 mai 2026
La tuile article est un élément visuel cliquable qui facilite la navigation vers un article.
- Guide d’utilisation
- Design
Utilisation
Cette tuile sert à proposer des articles en lien avec le sujet abordé dans la page. Elle permet de référencer les articles de façon interactive en invitant à explorer davantage le sujet.
Elle offre un aperçu du contenu de l’article pour aider l’utilisateur ou l’utilisatrice à choisir la prochaine étape de son parcours en cliquant ou non sur la tuile pour lire l’article.
La tuile est composée du titre de l’article auquel elle renvoie, d’une étiquette qui catégorise l’article et d’un temps de lecture.
Le visuel est optionnel. S’il y en a un, il reprend le visuel de l’article en format vignette (ratio 16:9). Selon le contexte, la tuile s’utilise seule ou en groupe.
2. Étiquette catégorisant l'article
3. Titre de l'article
4. Temps de lecture – X min (X min., en anglais)
Variants possibles
La tuile article existe en deux variants :
1. Tuile article groupée
Ce variant sert à présenter des articles dans un module de maillage. Le module est introduit par le titre de section standardisé Articles connexes (Related articles, en anglais). Il peut inclure un bouton texte pour rediriger vers une page carrefour d’articles. Le cas échéant, le libellé standardisé Voir tous les articles (See all articles, en anglais) est utilisé.
Caractéristiques du module
Présente une sélection de deux à quatre articles connexes.
Se positionne après le contenu principal.
2. Tuile article seule
La tuile article seule est utile pour mettre de l’avant un article connexe à un moment clé du parcours.
Caractéristiques de la tuile seule
Présente un seul article connexe.
S’intègre au fil de la page à proximité du contenu auquel elle est liée.
Se superpose à d’autres tuiles articles seules.
À faire : privilégier plutôt les tuiles articles groupées dans un module de maillage.
Quand envisager autre chose
Il existe différentes options de maillage selon l’intention visée.
- Pour mettre de l’avant des pages informationnelles en lien avec le contenu, on utilise un variant de la tuile.
- Pour présenter des références et des redirections complémentaires, on se sert de la liste de liens.
- Pour référer à un article directement dans le corps d’un texte, on privilégie l’hyperlien.
- Pour promouvoir un service, une initiative, une action ou une offre, on opte pour la bannière.
Rédaction UX
Titre de section
Le module de maillage avec des tuiles articles groupées est toujours introduit par le titre standardisé Articles connexes (Related articles, en anglais).
Le libellé standardisé suivant peut également être utilisé : Articles connexes pouvant vous intéresser (Related articles that might interest you, en anglais).
Si, pour répondre à un besoin précis, ce titre doit être modifié, il doit respecter une limite de 80 caractères, espaces incluses.
Lien vers une page carrefour d’articles (optionnel)
Un lien vers une page carrefour d’articles peut être intégré au module de maillage.
Celui-ci prend toujours la forme d’un bouton texte.
Son libellé Voir tous les articles (See all articles, en anglais) est standardisé.
Les règles de rédaction UX propres au titre de l'article, à l'étiquette et au temps de lecture sont détaillées dans le gabarit Page article.
Couleurs et styles
La tuile article est uniquement utilisée en blanc sur un arrière-plan de section qui est également blanc.
Personnalisation de la tuile article
Deux options de personnalisation sont possibles pour la tuile article : sans visuel ou avec un visuel de ratio 16:9.
La même option de personnalisation doit être utilisée pour toutes les tuiles d’un même module de maillage d’articles, afin d’assurer une uniformité dans la présentation.
Espacements
Toutes les règles d'espacements présentées ci-dessous sont applicables autant pour les tuiles articles avec visuel que celles sans visuel.
Pour la tuile article seule
La tuile seule est délimitée horizontalement par deux séparateurs. L'espacement qui s’insère entre la tuile et chacun des séparateurs est de 32 px.
Avec deux tuiles articles
Pour présenter deux tuiles articles, le format horizontal est utilisé. Un séparateur s’insère entre elles pour bien les délimiter. L’espacement de chaque côté du séparateur est de 24 px.
Avec plus de deux tuiles articles
Pour présenter plus de deux tuiles articles, le format vertical est utilisé. Un séparateur s’insère entre les tuiles pour bien les délimiter. L’espacement de chaque côté du séparateur est de 16 px.
Grille
La tuile seule occupe la totalité de l’espace du contenant dans lequel elle se trouve.
Lorsqu’il y a plusieurs tuiles, elles se distribuent de façon égale dans l’espace. En mobile, elles se placent l’une sous l'autre.
États interactifs
Pour les états survol et clic, toute la tuile est réactive et un filtre de saturation est appliqué au visuel.
Pour la tuile sans visuel, seul le titre agit comme indicateur d'interactivité, selon les quatre états habituels : défaut, survol, clic et focus.
