Ce composant est disponible depuis la version 1.1.0.
Nous sommes attentifs à vos retours afin de pouvoir apporter des corrections si nécessaire.
Soyez vigilant quand à son utilisation en production !


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.

Structure

La citation est composée des éléments suivants :

La citation est disponible en deux variantes : avec illustration ou sans illustration.

Citation avec illustration

La citation avec illustration permet d'incarner l’auteur de la citation avec une image .

Complète

<figure class="fr-quote fr-quote--column">
    <blockquote cite="[À MODIFIER | https://lien-vers-la-source.fr || supprimer l'attribut si pas d'url pour la source']">
        <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 target="_blank" href="[À MODIFIER | Lien vers la sources ou des infos complémentaires]">Détail 4</a>
            </li>
        </ul>
        <div class="fr-quote__image">
            <img src="../img/placeholder.1x1.png" class="fr-responsive-img" 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>

Sans auteur

<figure class="fr-quote fr-quote--column">
    <blockquote cite="[À MODIFIER | https://lien-vers-la-source.fr || supprimer l'attribut si pas d'url pour la source]">
        <p>« Lorem [...] elit ut. »</p>
    </blockquote>
    <figcaption>
        <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 target="_blank" href="[À MODIFIER | Lien vers la sources ou des infos complémentaires]">Détail 4</a>
            </li>
        </ul>
        <div class="fr-quote__image">
          <img src="../img/placeholder.1x1.png" class="fr-responsive-img" 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>

Sans détails

<figure class="fr-quote fr-quote--column">
    <blockquote cite="[À MODIFIER | https://lien-vers-la-source.fr || supprimer l'attribut si pas d'url pour la source]">
        <p>« Lorem [...] elit ut. »</p>
    </blockquote>
    <figcaption>
        <p class="fr-quote__author">Auteur</p>
        <div class="fr-quote__image">
            <img src="../img/placeholder.1x1.png" class="fr-responsive-img" 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>

Sans source

<figure class="fr-quote fr-quote--column">
    <blockquote cite="[À MODIFIER | https://lien-vers-la-source.fr || supprimer l'attribut si pas d'url pour la source]">
        <p>« Lorem [...] elit ut. »</p>
    </blockquote>
    <figcaption>
        <div class="fr-quote__image">
            <img src="../img/placeholder.1x1.png" class="fr-responsive-img" 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>

Citation sans illustration

La citation sans illustration est à utiliser quand il n’est pas nécessaire ou pas possible d’incarner l’auteur de la citation.

<figure class="fr-quote fr-quote--column">
    <blockquote cite="[À MODIFIER | https://lien-vers-la-source.fr || supprimer l'attribut si pas d'url pour la source]">
        <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 target="_blank" href="[À MODIFIER | Lien vers la sources ou des infos complémentaires]" rel="noopener" >Détail 4</a>
            </li>
        </ul>
    </figcaption>
</figure> 

La citation sans illustration se décline elle aussi sans auteur, sans citation et sans source.

Variante mobile

En mobile, le séparateur passe en dessous le texte de la source sur les deux versions avec ou sans illustration.

Pour la citation avec illustration, l’image est affichée en dessous le texte de la citation.

Règles d’utilisation

Accessibilité/SEO

Contenus

Personnalisation

Certains éléments du composant sont optionnels, voir sa structure.

Couleurs d’accent

L'élément Icône peut utiliser les couleurs illustratives :

Élément

Valeur par défaut

Valeur(s) autorisée(s)

Token

Classe css

Fond

$artwork-minor-blue-france

Correspondance :
Thème clair et sombre =
$blue-france-main-525

$[couleur]-main (thèmes clair / sombre)

exemples :
$green-emeraude-main-632
$brown-caramel-main-648

.fr-quote--[couleur]

.fr-quote--green-emeraude
.fr-quote--brown-caramel

Voir l’ensemble des couleurs illustratives à disposition


note

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :

Besoin d’aide ?

L'équipe du DSFR est là pour vous aider.
Retrouvez-la sur :