Systùme de Design de l’État

Skip to end of metadata
Go to start of metadata

You are viewing an old version of this page. View the current version.

Compare with Current View Page History

« Previous Version 9 Next »

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 :

  • le texte de la citation - obligatoire

  • une icĂŽne - obligatoire - qui permet d’informer l’utilisateur qu’il s’agit d’une mise en avant de citation

  • un texte pour l’auteur - optionnel - afin de prĂ©ciser quand nĂ©cessaire l’auteur de la citation

  • un texte pour les dĂ©tails de la citation - optionnel - afin de prĂ©ciser l’origine du texte citĂ©

  • image d’illustration - optionnelle

  • un sĂ©parateur - obligatoire - verticale en desktop, horizontal en mobile

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

  • Pour le texte de la citation, il faut intĂ©grer au dĂ©but et Ă  la fin des guillemets avec des espaces insĂ©cables.

  • Pour la source, un ouvrage doit obligatoirement ĂȘtre en italique.

  • Des champs dĂ©tails non prĂ©cisĂ©s sont prĂ©vus pour d’autres information, par exemple : Ă©dition, collection, date, ville, la fonction ou titre de l’auteur. Pour indiquer une URL dans ce champ, ajouter un soulignement pour en faire un lien.

  • Deux citations ne peuvent se suivre directement.

Accessibilité/SEO

  • Lorsque la citation reprend un text d’un autre site, ajouter l’url de celui-ci en attribut cite=”” du <blockquote> afin d’indiquer au moteur de recherche la liaison. Ne mettez pas l’attribut si aucune url de ressource n’est disponible.

  • L’ouvrage citĂ© doit ĂȘtre placĂ© dans une balise <cite> et ainsi apparaitre en italique.

  • Le texte de la citation est contenu dans un <blockquote> insĂ©rĂ© dans un bloc <figure> et les infos complĂ©mentaires (image, auteur, ouvrage... ) dans le <figcaption>.

Contenus

  • 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.

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


Besoin d’aide ?

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



  • No labels