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 class="fr-link--download fr-link" download="true" id="link-4787" href="/example/img/image.jpg">Télécharger le document lorem ipsum sit dolores amet <span class="fr-link__detail">JPG – 61,88 ko</span>
</a>
<ul class="fr-links-group">
<li>
<a class="fr-link--download fr-link" download="true" id="link-4792" href="[À MODIFIER - ../../../../example/img/image.jpg]">Télécharger le document lorem ipsum sit dolores amet <span class="fr-link__detail">JPG – 61,88 ko</span>
</a>
</li>
<li>
<a class="fr-link--download fr-link" download="true" id="link-4793" href="[À MODIFIER - ../../../../example/img/image.jpg]">Télécharger le document lorem ipsum sit dolores amet <span class="fr-link__detail">JPG – 61,88 ko</span>
</a>
</li>
<li>
<a class="fr-link--download fr-link" download="true" id="link-4794" href="[À MODIFIER - ../../../../example/img/image.jpg]">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 class="fr-link--download fr-link" hreflang="en" download="true" id="link-4797" href="exemple.pdf">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 class="fr-link--download fr-link" data-fr-assess-file download="true" id="link-4800" href="/example/img/image.jpg">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 class="fr-link--download fr-link" data-fr-assess-file="bytes" hreflang="fr" download="true" id="link-4803" href="/example/img/image.jpg">Download the french document lorem ipsum <span class="fr-link__detail"> </span>
</a>