Citation

La citation est un élément éditorial permettant de mettre en forme du contenu dans une page.

HTML

Structure du composant

La citation permet de citer un texte dans une page éditoriale. La citation peut provenir d'un extrait d’un discours oral formulé par une tierce personne ou d’un texte écrit.

Sa structure est la suivante :

Le conteneur principal, obligatoire, est un élément HTML <figure> défini par la classe fr-quote et contenant :
- Le texte de la citation, obligatoire, est un élément HTML <blockquote> disposant d'un attribut cite doit la valeur est la source de la citation.
- Les informations complémentaires de la citation, sont dans un élément HTML <figcaption> contenant :
  - Un premier paragraphe <p>, optionnel, afin de préciser quand nécessaire l’Auteur de la citation, défini par la classe fr-quote__author.
  - Une liste <ul>, optionnelle, afin de préciser l’origine du texte cité, définie par la classe fr-quote__source.
    - Les éléments <li> de la liste des informations complémentaires peuvent contenir un élément <cite> ou un lien <a> afin de préciser l'ouvrage cité ou la source de la citation.
  - Une image illustrative de la citation, optionnelle, dans un élément HTML <div> défini par la classe fr-quote__image et contenant un élément HTML <img> défini par la classe fr-responsive-img.

Exemple de structure HTML

<figure class="fr-quote fr-quote--column">
    <blockquote cite="[À MODIFIER - https://lien-vers-la-source.fr]">
        <p>« Lorem [...] elit ut. »</p>
    </blockquote>
    <figcaption>
        <p class="fr-quote__author">Auteur</p>
        <ul class="fr-quote__source">
            <li>
                <cite>Ouvrage</cite>
            </li>
            <li>Détail 1</li>
            <li>Détail 2</li>
            <li>Détail 3</li>
            <li>
                <a href="">Détail 4</a>
            </li>
        </ul>
        <div class="fr-quote__image">
            <img class="fr-responsive-img" src="../../../example/img/placeholder.1x1.png" alt="" />
            <!-- L’alternative de l’image (attribut alt) doit rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
        </div>
    </figcaption>
</figure>

CSS

Installation du CSS

Pour fonctionner correctement, le style CSS de la citation et du core doit être importé dans la page. Les fichiers doivent être inclus dans le <head> avant le contenu de la page.

<link href="dist/core/core.min.css" rel="stylesheet">
<link href="dist/component/quote/quote.min.css" rel="stylesheet">

NB: Il est aussi possible d'importer le CSS global du DSFR dsfr.min.css.

Pour une compatibilité avec Internet Explorer 11, les fichiers legacy peuvent également être ajoutés :

<link href="dist/core/core.legacy.min.css" rel="stylesheet">
<link href="dist/component/quote/quote.legacy.min.css" rel="stylesheet">

Variante de taille

La citation est disponible en deux variantes de tailles pour s'adapter à différents contextes d'utilisation. Pour appliquer une variante de taille, ajoutez une des classes suivantes à l'élément paragraphe <p> contenant la citation :

En taille XL : par défaut.
En taille LG : définie par la classe fr-text--lg.

Exemple de variante de taille

<figure class="fr-quote">
    <blockquote cite="[À MODIFIER - https://lien-vers-la-source.fr]">
        <p class="fr-text--lg">« Lorem [...] elit ut. »</p>
    </blockquote>
    <figcaption>
        <!-- Contenu des détails de la citation -->
    </figcaption>
</figure>

Accentuation

La citation est accentuable, permettant le changement de la couleur de l'icône illustrative. Pour cela, ajouter la classe fr-quote--NOM-COULEUR au même niveau que la classe fr-quote.

Exemple de variante accentuée

<figure class="fr-quote fr-quote--green-emeraude">
    <!-- Contenu de la citation -->
</figure>

JavaScript

Le composant Citation ne nécessite pas l'utilisation de JavaScript pour son fonctionnement de base.

Note de version

Voir les évolutions sur github

v1.12.0 - 19 juin 2024

ratio de l'image de citation

ajout de la propriété object-fit: cover sur l'image de citation pour conserver le ratio de l'image lorsqu'elle n'est pas carrée.
dans la mesure du possible, privilégiez un ratio d'image carré pour un meilleur support navigateur

🐛 fix

quote

#912

v1.11.0 - 11 décembre 2023

ajoute un exemple avec un seul detail

il n'est plus obligatoire d'avoir une liste dans le figcaption de la citation

🐛 fix

quote

#721

v1.8.0 - 27 octobre 2022

couleur du texte quote__sources

fix

quote

#437

Proposer une amélioration

Aidez-nous à améliorer la documentation en laissant vos retours, questions ou commentaires sur GitHub.

Accéder à Github