Conseils
Les blocs de contenu permettent de créer des groupes d’informations faciles à parcourir et à comprendre pour les utilisateurs. Leurs titres et leurs descriptions doivent être courts, et les liens doivent clairement décrire ce vers quoi ils mènent. Ils visent à présenter de petites quantités d’informations. Si vous cherchez à énumérer des éléments comme une série de publications, d’articles ou d’autres sites Web, utilisez plutôt un composant de liste. Les blocs de contenu peuvent servir à :
- Créer une structure hiérarchique pour les pages riches en contenu.
- Mettre en évidence des informations importantes.
- Grouper des renseignements connexes.
- Grouper le contenu qui inclut plusieurs liens.
Bloc de contenu
Un bloc de contenu peut être utilisé pour séparer les informations clés d’une page et y attirer l’attention. Assurez-vous que les blocs de contenu sont toujours insérés à l’intérieur d’un conteneur. Utilisez un groupe de blocs de contenu comme conteneur pour les groupes de plus d’un bloc.
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
HTML
<div class="gnb-content-block">
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
Groupe de blocs de contenu
Les groupes de blocs de contenu sont utilisés pour regrouper des informations connexes, facilitant ainsi la comparaison des options ou la recherche rapide de renseignements pertinents pour les utilisateurs. Utilisez les groupes de blocs de contenu pour :
- Diviser de longues pages de texte ou d’autres contenus en petites sections plus facilement gérables.
- Rendre la page plus facile à parcourir et aider rapidement les utilisateurs à trouver ce qu’ils cherchent.
- Distinguer et mettre en évidence les informations clés d’une page.
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
HTML
<div class="gnb-content-block-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-content-block">
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
</div>
</div>
</div>
</div>
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
HTML
<div class="gnb-content-block-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-content-block">
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
<p>
<a href="#">Télécharger (PDF, 12.5 MB)</a>
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
<ul>
<li><a href="#" class="external-link">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipscing elit sodales</a></li>
<li><a href="#">Volutpat risus tempus id</a></li>
</ul>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipsing elit doales volutpat risus tempus id.
</p>
<ul>
<li><a href="#" class="external-link">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipscing elit sodales</a></li>
<li><a href="#">Volutpat risus tempus id</a></li>
</ul>
<p>
<a href="#">Voir plus</a>
</p>
</div>
</div>
</div>
</div>
Bloc de contenu avec icône
Des icônes peuvent être ajoutées au contenu mis en vedette et lorsqu’il faut fournir un contexte.
En-tête du bloc de contenu
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
En-tête du bloc de contenu
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
En-tête du bloc de contenu
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
HTML
<div class="gnb-content-block-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-content-block">
<i class="fa-solid fa-box-archive"></i>
<h3>En-tête du bloc de contenu</h3>
<p>
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<i class="fa-solid fa-mask-face"></i>
<h3>En-tête du bloc de contenu</h3>
<p>
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<i class="fa-solid fa-folder-open"></i>
<h3>En-tête du bloc de contenu</h3>
<p>
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
</p>
</div>
</div>
</div>
</div>
Bloc de contenu avec icône et liens
En-tête du bloc de contenu
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
En-tête du bloc de contenu
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
En-tête du bloc de contenu
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
HTML
<div class="gnb-content-block-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-content-block">
<i class="fa-solid fa-box-archive"></i>
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
</p>
<p>
<a href="#">Télécharger (PDF, 12.5 MB)</a>
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<i class="fa-solid fa-mask-face"></i>
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
</p>
<ul>
<li><a href="#" class="external-link">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipiscing elit sodales</a></li>
<li><a href="#">Volutpat risus tempus id</a></li>
</ul>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<i class="fa-solid fa-folder-open"></i>
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
</p>
<ul>
<li><a href="#" class="external-link">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipiscing elit sodales</a></li>
<li><a href="#">Volutpat risus tempus id</a></li>
</ul>
<p>
<a href="#">Voir plus</a>
</p>
</div>
</div>
</div>
</div>
Bloc de contenu avec icône à gauche
HTML
<div class="gnb-content-block-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-content-block-icon-left">
<div class="icon">
<i class="fa-solid fa-chart-line"></i>
</div>
<div class="content">
<h3>En-tête du bloc de contenu</h3>
<p>
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-content-block-icon-left">
<div class="icon">
<i class="fa-solid fa-user"></i>
</div>
<div class="content">
<h3>En-tête du bloc de contenu</h3>
<p>
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
</p>
</div>
</div>
</div>
<div class="col">
<div class="gnb-content-block-icon-left">
<div class="icon">
<i class="fa-solid fa-file-lines"></i>
</div>
<div class="content">
<h3>En-tête du bloc de contenu</h3>
<p>
Sed egestas velit sit amet lorem porttitor, eu posuere elit varius.
</p>
</div>
</div>
</div>
</div>
</div>
Bloc de contenu avec image
Des images peuvent être ajoutées au contenu mis en vedette. Notez que les images s’afficheront dans un rapport hauteur/largeur de 16:9, qu’elles soient recadrées ou non.
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
HTML
<div class="gnb-content-block-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-content-block">
<img src="img/votre-image.jpg" alt="" />
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<img src="img/votre-image.jpg" alt="" />
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<img src="img/votre-image.jpg" alt="" />
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
</p>
</div>
</div>
</div>
</div>
Bloc de contenu avec image et liens
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
En-tête du bloc de contenu
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
HTML
<div class="gnb-content-block-group">
<div class="row row-cols-1 row-cols-md-2 row-cols-lg-3">
<div class="col">
<div class="gnb-content-block">
<img src="img/votre-image.jpg" alt="" />
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
</p>
<p>
<a href="#">Télécharger (PDF, 12.5 MB)</a>
</p>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<img src="img/votre-image.jpg" alt="" />
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
</p>
<ul>
<li><a href="#" class="external-link">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipiscing elit sodales</a></li>
<li><a href="#">Volutpat risus tempus id</a></li>
</ul>
</div>
</div>
<div class="col">
<div class="gnb-content-block">
<img src="img/votre-image.jpg" alt="" />
<h3>En-tête du bloc de contenu</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit sodales volutpat risus tempus id.
</p>
<ul>
<li><a href="#" class="external-link">Lorem ipsum dolor sit amet</a></li>
<li><a href="#">Consectetur adipiscing elit sodales</a></li>
<li><a href="#">Volutpat risus tempus id</a></li>
</ul>
<p>
<a href="#">Voir plus</a>
</p>
</div>
</div>
</div>
</div>