Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Info

Ce composant est disponible depuis la dernière 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.

Table of Contents
maxLevel2

Structure

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

...

Code Block
languagehtml
<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="[À MODIFIER | texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
        </div>
    </figcaption>
</figure>

...

Code Block
languagehtml
<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="[À MODIFIER | texte alternatif de l’image]" />
 
          <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
        </div>
    </figcaption>
</figure>

...

Code Block
<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="[À MODIFIER | texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
        </div>
    </figcaption>
</figure>

...

Code Block
languagehtml
<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="[À MODIFIER | texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit impérativement être renseignée et reprendre le texte visible dans l’image rester vide car l’image est illustrative et ne doit pas être restituée aux technologies d’assistance -->
        </div>
    </figcaption>
</figure>

...

Code Block
languagehtml
<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> 

...

  • Une citation n’est pas limité en nombre de caractère, tant qu’elle est correctement “sourcée”, il convient cependant de ne pas excéder une taille trop importante pour éviter que le bloc ne prenne trop de place, notamment en mobile.

  • Pour rappel, les citations courtes d’une oeuvre publiée sont autorisées et encadrées en France par le Code de la Propriété Intellectuelle et plus précisément l'article L122-5.

Besoin d’aide ?

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

...

  • .