Contenu

Figures

Une figure associe un contenu (image, schéma, citation) à sa légende. Cauri fournit trois classes pour la présenter proprement.

L’élément HTML <figure> regroupe un contenu autonome et sa légende <figcaption>. Le reboot supprime ses marges latérales ; les classes .figure, .figure-img et .figure-caption complètent la mise en forme.

.figure affiche la figure en ligne-bloc : elle prend la largeur de son contenu au lieu de s’étirer sur toute la ligne.

Figure avec légende#

Mettez .figure-img sur le contenu (avec .img-fluid pour qu’il reste fluide) et .figure-caption sur la légende, qui s’affiche en petit et en gris.

Évolution de l'épargne sur douze mois.

<figure class="figure">
  <svg class="figure-img img-fluid rounded" role="img" aria-label="Courbe d'épargne qui monte régulièrement" width="400" height="200" viewBox="0 0 400 200" xmlns="http://www.w3.org/2000/svg">
    <rect width="400" height="200" fill="#EAEBEA"/>
    <polyline points="20,170 100,140 180,120 260,80 340,40 380,30" fill="none" stroke="#2B62AA" stroke-width="6"/>
  </svg>
  <figcaption class="figure-caption">Évolution de l'épargne sur douze mois.</figcaption>
</figure>

Alignement de la légende#

Les utilitaires de texte alignent la légende : .text-start (par défaut), .text-center ou .text-end.

Source : service des prêts, avril.

<figure class="figure">
  <svg class="figure-img img-fluid rounded" role="img" aria-label="Schéma de remboursement mensuel" width="400" height="120" viewBox="0 0 400 120" xmlns="http://www.w3.org/2000/svg">
    <rect width="400" height="120" fill="#EAEBEA"/>
    <rect x="30" y="50" width="60" height="50" fill="#2B62AA"/>
    <rect x="120" y="40" width="60" height="60" fill="#2B62AA"/>
    <rect x="210" y="30" width="60" height="70" fill="#2B62AA"/>
    <rect x="300" y="20" width="60" height="80" fill="#387A1B"/>
  </svg>
  <figcaption class="figure-caption text-end">Source : service des prêts, avril.</figcaption>
</figure>

Figure pleine largeur#

Pour étirer la figure à la largeur de son parent, ajoutez .d-block : le contenu fluide la suit.

Plan de situation de l'agence du Plateau.

<figure class="figure d-block mb-0">
  <svg class="figure-img img-fluid rounded w-100" role="img" aria-label="Plan de situation de l'agence" width="800" height="200" viewBox="0 0 800 200" preserveAspectRatio="xMidYMid slice" xmlns="http://www.w3.org/2000/svg">
    <rect width="800" height="200" fill="#EAEBEA"/>
    <rect x="60" y="80" width="680" height="30" fill="#fff"/>
    <circle cx="400" cy="95" r="14" fill="#0856A1"/>
  </svg>
  <figcaption class="figure-caption text-center">Plan de situation de l'agence du Plateau.</figcaption>
</figure>

Figure flottante à côté du texte#

Combinez .figure avec .float-start ou .float-end pour insérer la figure dans un paragraphe. .clearfix sur le parent le fait englober la figure.

Carte Visa Gold.

Votre carte est livrée en agence sous cinq jours ouvrés. Activez-la depuis votre application, puis choisissez votre code confidentiel. Elle vous permet de payer en ligne, chez les commerçants et de retirer de l'argent dans toutes les agences du réseau.

<div class="clearfix">
  <figure class="figure float-start me-3">
    <svg class="figure-img rounded" role="img" aria-label="Carte bancaire stylisée" width="160" height="100" viewBox="0 0 160 100" xmlns="http://www.w3.org/2000/svg">
      <rect width="160" height="100" fill="#2B62AA"/><rect y="24" width="160" height="16" fill="#0856A1"/><rect x="14" y="66" width="60" height="10" fill="#EAEBEA"/>
    </svg>
    <figcaption class="figure-caption">Carte Visa Gold.</figcaption>
  </figure>
  <p class="mb-0">Votre carte est livrée en agence sous cinq jours ouvrés. Activez-la depuis votre application, puis choisissez votre code confidentiel. Elle vous permet de payer en ligne, chez les commerçants et de retirer de l'argent dans toutes les agences du réseau.</p>
</div>

Classes de figure

Classes de figure
Classe	Élément	Effet
`.figure`	`figure`	Affichage en ligne-bloc : la figure prend la largeur de son contenu.
`.figure-img`	image, SVG ou autre contenu	Marge basse `0.5rem` et interligne de 1, pour coller la légende au contenu.
`.figure-caption`	`figcaption`	Légende en `0.875em`, couleur de texte secondaire.

Bonnes pratiques

À faire

Utilisez toujours figcaption pour la légende : elle est liée à la figure pour les technologies d’assistance.
Rédigez une légende qui apporte une information (source, date, contexte) au lieu de répéter le texte alternatif.
Associez .figure-img à .img-fluid pour que le contenu reste dans la page sur petit écran.

À éviter

N’utilisez pas une figure pour une simple image décorative : elle n’a pas besoin de légende.
Ne placez pas la légende hors de l’élément figure : le lien entre les deux serait perdu.

Accessibilité

Le texte alternatif de l’image décrit le contenu visuel, la légende en donne le contexte : les deux se complètent.
Pour un graphique ou un tableau en image, fournissez aussi les données sous forme de texte ou de tableau.