DSFR v1.12.0
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.
Documentation<figure class="fr-quote">
<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 target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="[À MODIFIER - Lien vers la sources ou des infos complémentaires]">Détail 4</a>
</li>
</ul>
</figcaption>
</figure>
<figure class="fr-quote">
<blockquote cite="[À MODIFIER - https://lien-vers-la-source.fr]">
<p class="fr-text--lg">« Lorem [...] elit ut. »</p>
</blockquote>
<figcaption>
<p class="fr-quote__author">Auteur</p>
<div class="fr-quote__source">
<a target="_blank" href="[À MODIFIER - Lien vers la sources ou des infos complémentaires]">Un seul détail</a>
</div>
</figcaption>
</figure>
<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>
<figure class="fr-quote fr-quote--green-emeraude">
<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 target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" href="[À MODIFIER - Lien vers la sources ou des infos complémentaires]">Détail 4</a>
</li>
</ul>
</figcaption>
</figure>