DSFR v1.12.0
Le lien permet la navigation entre une page et un autre contenu au sein de la même page, du même site ou externe. Pour les actions d’un autre type - comme la soumission d’un formulaire - il faut utiliser le composant bouton.
Documentation
<a id="link-5018" download="true" href="/example/img/image.jpg" class="fr-link fr-link--download">Télécharger le document lorem ipsum sit dolores amet <span class="fr-link__detail">JPG – 61,88 ko</span>
</a>
<button id="link-5021" download="true" class="fr-link fr-link--download">Télécharger le document lorem ipsum sit dolores amet <span class="fr-link__detail">JPG – 61,88 ko</span>
</button>
<ul class="fr-links-group">
<li>
<a id="link-5026" download="true" href="[À MODIFIER - ../../../../example/img/image.jpg]" class="fr-link fr-link--download">Télécharger le document lorem ipsum sit dolores amet <span class="fr-link__detail">JPG – 61,88 ko</span>
</a>
</li>
<li>
<a id="link-5027" download="true" href="[À MODIFIER - ../../../../example/img/image.jpg]" class="fr-link fr-link--download">Télécharger le document lorem ipsum sit dolores amet <span class="fr-link__detail">JPG – 61,88 ko</span>
</a>
</li>
<li>
<a id="link-5028" download="true" href="[À MODIFIER - ../../../../example/img/image.jpg]" class="fr-link fr-link--download">Télécharger le document lorem ipsum sit dolores amet <span class="fr-link__detail">JPG – 61,88 ko</span>
</a>
</li>
</ul>
Indiquer le code langue (ISO 639‑1) du fichier dans l'attribut "hreflang" et la langue en toute lettre dans le détail
<a id="link-5031" hreflang="en" download="true" href="exemple.pdf" class="fr-link fr-link--download">Télécharger le document lorem ipsum sit dolores amet <span class="fr-link__detail">PDF – 1,81 Mo - Anglais</span>
</a>
L'attribut data-fr-assess-file permet de remplir automatiquement le détail avec le type, le poids, et la langue (hreflang) du fichier.
<a id="link-5034" data-fr-assess-file download="true" href="/example/img/image.jpg" class="fr-link fr-link--download">Télécharger le document lorem ipsum sit dolores amet <span class="fr-link__detail"> </span>
</a>
Sur une page en anglais, ou toute autre langue utilisant l'unité "Bytes" plutot que "Octet", ajouter la valeur "bytes" sur l'attribut : data-fr-assess-file="bytes".
<a id="link-5037" hreflang="fr" data-fr-assess-file="bytes" download="true" href="/example/img/image.jpg" class="fr-link fr-link--download">Download the french document lorem ipsum <span class="fr-link__detail"> </span>
</a>