Citation

Citation longue : modificateur bj-quote--accent (bordure rouge Bénin), texte via contenu du blockquote (ou prop text en Vue), bj-quote__author, bj-quote__source, image optionnelle bj-quote__image (pas bj-quote__img) placée avant le blockquote, comme dans le composant Vue.

Exemple complet

Le numérique doit rapprocher l’administration des citoyens, pas l’inverse.

Prénom Nom Discours d’inauguration - Cotonou, 2024

<figure class="bj-quote">
  <blockquote class="bj-quote__text">…</blockquote>
  <figcaption>
    <span class="bj-quote__author">…</span>
    <span class="bj-quote__source">…</span>
  </figcaption>
</figure>

Texte seul

Le figcaption n’apparaît que si auteur ou source est présent ; une citation peut n’avoir que le bloc de texte.

Citation sans attribution affichée dans le flux éditorial.

<figure class="bj-quote">
  <blockquote class="bj-quote__text">
    Citation sans attribution affichée.
  </blockquote>
</figure>

Auteur et source

Utilisez span.bj-quote__author et span.bj-quote__source dans figcaption ; l’un ou l’autre peut être omis.

Les services en ligne réduisent les délais de traitement.

Direction du numérique

<figure class="bj-quote">
  <blockquote class="bj-quote__text">…</blockquote>
  <figcaption>
    <span class="bj-quote__author">Prénom Nom</span>
  </figcaption>
</figure>

Accent × texte seul

La variante bj-quote--accent s’applique sans auteur ni source : seul le blockquote est requis.

La simplification des démarches est un engagement fort du gouvernement.

<figure class="bj-quote bj-quote--accent">
  <blockquote class="bj-quote__text">
    Extrait mis en avant sans attribution affichée.
  </blockquote>
</figure>

Variante accent

La transparence des données est un levier de confiance.

Rapport annuelChapitre 3 - Gouvernance

<figure class="bj-quote bj-quote--accent">
  <blockquote class="bj-quote__text">…</blockquote>
  <figcaption>
    <span class="bj-quote__author">…</span>
    <span class="bj-quote__source">…</span>
  </figcaption>
</figure>

Avec portrait

L’image précède le blockquote dans le figure ; fournissez un alt pertinent si l’image apporte une information.

Les services en ligne réduisent les déplacements et le temps d’attente.

Usagère du portail

<figure class="bj-quote">
  <img class="bj-quote__image" src="…" width="48" height="48" alt="Portrait" />
  <blockquote class="bj-quote__text">…</blockquote>
  <figcaption>
    <span class="bj-quote__author">…</span>
  </figcaption>
</figure>

Accent × image

Vous pouvez combiner bj-quote--accent et bj-quote__image pour un témoignage mis en avant avec portrait.

Le guichet unique nous a fait gagner plusieurs semaines.

Chef d’entrepriseEnquête usagers 2025

<figure class="bj-quote bj-quote--accent">
  <img class="bj-quote__image" src="…" width="48" height="48" alt="Portrait" />
  <blockquote class="bj-quote__text">…</blockquote>
  <figcaption>
    <span class="bj-quote__author">…</span>
    <span class="bj-quote__source">…</span>
  </figcaption>
</figure>

Classes CSS

Classe	Description
`bj-quote`	Conteneur <code>figure</code> avec bordure gauche verte action.
`bj-quote__text`	Texte cité (Spectral italique, guillemets via CSS).
`bj-quote__author`	Nom ou fonction de la personne citée.
`bj-quote__source`	Référence, date ou ouvrage.
`bj-quote--accent`	Modificateur : bordure gauche rouge Bénin.
`bj-quote__image`	Avatar ou portrait au-dessus de la citation (classe <code>bj-quote__image</code> dans les feuilles de style — ne pas utiliser <code>bj-quote__img</code>).