--- boost: 0 sitemap: noindex: true title: Code de la Citation shortTitle: Code de la Citation description: Mise à disposition des extraits de code, de l’API et de la documentation technique du composant Citation. shortDescription: Citer un texte dans un contenu éditorial. keywords: citation, quote, contenu éditorial, extrait, source, typographie, italique, UX, accessibilité, design system, mise en forme cover: ../_asset/cover/cover.png excerpt: Le composant Citation permet d’intégrer un extrait textuel dans une page, avec des champs de détails pour ajouter des précisions sur la source. Il doit respecter une présentation typographique soignée. summary: Ce document décrit les usages du composant Citation, destiné à intégrer des extraits de textes ou de discours dans un contenu éditorial. Il explique comment distinguer la citation des composants de mise en avant ou de mise en exergue, précise les règles typographiques à appliquer, comme l’usage de guillemets et de l’italique, et recommande d’éviter les citations trop longues pour préserver la lisibilité. Il fournit également des indications sur la structuration, l’usage des champs de détails, et les règles de propriété intellectuelle à respecter. mesh: - component/callout - component/highlight --- ## Citation La citation est un élément éditorial permettant de mettre en forme du contenu dans une page. :::dsfr-doc-tab-navigation - [Présentation](../index.md) - [Démo](../demo/index.md) - [Design](../design/index.md) - Code - [Accessibilité](../accessibility/index.md) ::: ### 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 `
` défini par la classe `fr-quote` et contenant : - Le texte de la citation, obligatoire, est un élément HTML `
` 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 `
` contenant : - Un premier paragraphe `

`, optionnel, afin de préciser quand nécessaire l’Auteur de la citation, défini par la classe `fr-quote__author`. - Une liste `

    `, optionnelle, afin de préciser l’origine du texte cité, définie par la classe `fr-quote__source`. - Les éléments `
  • ` de la liste des informations complémentaires peuvent contenir un élément `` ou un lien `` 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 `
    ` défini par la classe `fr-quote__image` et contenant un élément HTML `` défini par la classe `fr-responsive-img`. **Exemple de structure HTML** ```HTML

    « Lorem [...] elit ut. »

    Auteur
    ``` --- ### CSS #### Installation du CSS Pour fonctionner correctement le style CSS du composant et de ses dépendances doivent être importés. L'import doit se faire avant le contenu de la page dans la partie ``, et de préférence avec les fichiers minifiés, car plus légers. Il est possible d'importer les fichiers CSS avec un niveau de granularité adapté à vos besoins. Voir le découpage des fichiers CSS du DSFR dans la [documentation dédiée](path:/getting-started/developer/get-started#les-css). :::fr-table[Dépendances CSS]{valign=top scroll=false} | Dépendance | Obligatoire | |------------|-------------| | Core | Oui | | Quote | Oui | ::: **Exemple d'imports CSS** ```HTML ``` #### 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 `

    ` 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** ```HTML

    « Lorem [...] elit ut. »

    ``` #### 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** ```HTML
    ``` ### 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](https://github.com/GouvernementFR/dsfr/pulls?q=is%3Apr+is%3Aclosed+is%3Amerged+quote+) ::dsfr-doc-changelog