Conseils
Les cartes sont un modèle de navigation. Les informations qui y sont présentées doivent décrire le produit, le service ou le contenu auquel elles renvoient. Le texte, les images et les icônes doivent être choisis avec soin. Les images ou les icônes ne doivent être ajoutées que pour faire ressortir un contenu important ou pour fournir un contexte. Les cartes sont composées des éléments suivants :
- Titre : Le titre du produit, du service ou du contenu auquel la carte renvoie.
- Lien : L’emplacement du produit, du service ou du contenu de destination.
- Description : Une brève explication qui décrit précisément la destination et ce qui peut y être appris ou accompli. Elle fournit aux utilisateurs le contexte dont ils ont besoin pour décider s’ils veulent cliquer sur la carte ou non.
- Méta-informations (optionnel) : Les méta-informations indiquent que la carte appartient à une catégorie.
- Image (optionnel) : Les images attirent l’attention sur les contenus en vedette et promotionnels ou fournissent plus de contexte lorsque c’est nécessaire.
- Icône (optionnel) : Les icônes attirent l’attention sur le contenu en vedette ou fournissent plus de contexte lorsque c’est nécessaire.
À faire
- Utilisez les cartes pour naviguer entre les sujets, les sous-sujets et les destinations.
- Assurez-vous que les titres et les descriptions des cartes correspondent aux titres et aux sous-titres descriptifs des pages vers lesquelles elles dirigent les utilisateurs.
- Assurez-vous que les titres et les descriptions des cartes correspondent aux titres et aux sous-titres descriptifs des pages vers lesquelles elles dirigent les utilisateurs.
- Séparez les différents groupes de cartes par des sections ou des règles horizontales et
introduisez-les par un titre
<h2>. - Utilisez une carte avec image pour le contenu en vedette.
- Utilisez une carte avec superposition d’image pour le contenu promotionnel.
- Utilisez une classe d’icône de lien externe si la carte dirige l’utilisateur vers un site Web externe.
À ne pas faire
- N’utilisez pas de carte lorsque le contenu n’est pas conçu pour la navigation. Utilisez plutôt des blocs de contenu.
- Ne rédigez pas de titres de cartes de plus de 3 lignes et des descriptions de plus de 5 lignes.
- Ne mélangez pas les types de cartes dans un même groupe. Seul un type de carte peut être utilisé par groupe.
- N’oubliez pas de séparer les groupes par un titre.
- N’ajoutez pas de liens intralignes dans le contenu des cartes.
- N’utilisez pas de cartes pour renvoyer directement à des documents, tels que des PDF. Utilisez plutôt des blocs de contenu.
Carte
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
HTML
<div class="gnb-card">
<div class="gnb-card-body">
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
Groupe de cartes
Si vous souhaitez afficher plus d’une carte, englobez l’ensemble dans un groupe de cartes.
L’élément .gnb-card-group vous permet de vous assurer que toutes les cartes d’un
groupe s’alignent et se trient correctement, et que toutes les cartes d’une même rangée ont la
même hauteur.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
En-tête de carte avec lien externe
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
HTML
<div class="gnb-card-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<h3><a href="#" class="external-link">En-tête de carte avec lien externe</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</div>
</div>
Carte avec informations méta
Les méta-informations sont utilisées pour indiquer si une carte appartient à une catégorie particulière, comme une étiquette, un sujet, un thème ou un type. Elles ne devraient pas dépasser un ou deux mots. Elles doivent seulement être utilisées lorsque le contexte supplémentaire apporte de la valeur ajoutée à l’utilisateur.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
HTML
<div class="gnb-card-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<span class="gnb-card-meta">Catégorie</span>
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<span class="gnb-card-meta">Catégorie</span>
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<span class="gnb-card-meta">Catégorie</span>
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
</div>
</div>
Carte avec image
Les cartes avec image peuvent être utilisées pour faire ressortir un contenu en vedette ou pour fournir un contexte, si nécessaire. Les images doivent toujours être redimensionnées et optimisées pour le Web. Ce composant recadrera votre image pour l’adapter au bon rapport hauteur/largeur.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing.
HTML
<div class="gnb-card-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-card">
<img src="img/votre-image.jpg" alt="">
<div class="gnb-card-body">
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<img src="img/votre-image.jpg" alt="">
<div class="gnb-card-body">
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<img src="img/votre-image.jpg" alt="">
<div class="gnb-card-body">
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing.</p>
</div>
</div>
</div>
</div>
</div>
Carte avec image et méta-informations
Ce type de carte est utilisé pour indiquer la catégorie du contenu en vedette.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
HTML
<div class="gnb-card-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-card">
<img src="img/votre-image.jpg" alt="">
<div class="gnb-card-body">
<span class="gnb-card-meta">Catégorie</span>
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<img src="img/votre-image.jpg" alt="">
<div class="gnb-card-body">
<span class="gnb-card-meta">Catégorie</span>
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<img src="img/votre-image.jpg" alt="">
<div class="gnb-card-body">
<span class="gnb-card-meta">Catégorie</span>
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
</div>
</div>
Carte avec icône
Les icônes peuvent être utilisées pour faire ressortir le contenu en vedette ou fournir plus de contexte, si nécessaire. Attention à ne pas utiliser trop d’icônes et à choisir celles qui ressemblent le plus à ce qu’elles représentent. Vous devez utiliser les icônes de la bibliothèque d’icônes approuvées et respecter les conseils en matière d’iconographie du système de conception du GNB.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
En-tête de carte
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
HTML
<div class="gnb-card-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<i class="fa-solid fa-arrow-trend-up"></i>
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<i class="fa-solid fa-shield-halved"></i>
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card">
<div class="gnb-card-body">
<i class="fa-solid fa-mobile-screen"></i>
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
</div>
</div>
Carte avec superposition d'image
Les cartes avec superposition d’image doivent être utilisées avec modération pour attirer l’attention sur les contenus vedettes et promotionnels. Les titres et les descriptions sont alignés par le bas. Les images doivent toujours être redimensionnées et optimisées pour le Web. Ce composant recadrera votre image pour l’adapter au bon rapport hauteur/largeur.
HTML
<div class="gnb-card-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-card gnb-card-background-img" style="background-image: url(img/votre-image.jpg)">
<div class="gnb-card-img-overlay">
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card gnb-card-background-img" style="background-image: url(img/votre-image.jpg)">
<div class="gnb-card-img-overlay">
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card gnb-card-background-img" style="background-image: url(img/votre-image.jpg)">
<div class="gnb-card-img-overlay">
<h3><a href="#" class="external-link">En-tête de carte avec lien externe</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
</div>
</div>
Carte avec superposition d’image et méta-informations
Ce type de carte doit être utilisé avec parcimonie et est réservé pour mettre en évidence le contenu en vedette et promotionnel. Les en-têtes et descriptions des cartes sont alignés en bas. Les images doivent toujours être redimensionnées et optimisées pour le web. Ce composant recadrera votre image au bon rapport d'aspect.
HTML
<div class="gnb-card-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-card gnb-card-background-img" style="background-image: url(img/votre-image.jpg)">
<div class="gnb-card-img-overlay">
<span class="gnb-card-meta">Catégorie</span>
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card gnb-card-background-img" style="background-image: url(img/votre-image.jpg)">
<div class="gnb-card-img-overlay">
<span class="gnb-card-meta">Catégorie</span>
<h3><a href="#">En-tête de carte</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-card gnb-card-background-img" style="background-image: url(img/votre-image.jpg)">
<div class="gnb-card-img-overlay">
<span class="gnb-card-meta">Catégorie</span>
<h3><a href="#" class="external-link">En-tête de carte avec lien externe</a></h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.</p>
</div>
</div>
</div>
</div>
</div>