Ce composant permet aux utilisateurs de télécharger un ou plusieurs fichiers.
DocumentationIl existe 2 variantes possible pour ce composant. La forme de lien, et la forme de carte.
L'intitulé du lien doit commencer par ‘Télécharger’.
Le détail est obligatoire et doit conntenir le type (extension du fichier), le poids, la langue (si différente)). Laisser le détail vide si utilisation de l'utilitaire js de remplissage automatique
L’attribut "download" permettant de télécharger directement le document, sans l’ouvrir, est optionnel. Ajouter un nom de fichier en valeur de cet attribut pour renommer le fichier avant de le télécharger. Mettre un attribut target=”_blank” pour ouvrir le document dans une nouvelle fenêtre.
<div class="fr-download">
<h3>
<a href="[À MODIFIER - ../../../example/img/image.jpg]" id="fr-download-link-6401" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
JPG – 61,88 ko
</span>
</a>
</h3>
</div>
<div class="fr-downloads-group">
<ul>
<li>
<div class="fr-download">
<h3>
<a href="[À MODIFIER - ../../../example/img/image.jpg]" id="fr-download-link-6407" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
PDF – 61,88 Ko
</span>
</a>
</h3>
</div>
</li>
<li>
<div class="fr-download">
<h3>
<a href="[À MODIFIER - ../../../example/img/image.jpg]" id="fr-download-link-6408" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
PDF – 61,88 Ko
</span>
</a>
</h3>
</div>
</li>
<li>
<div class="fr-download">
<h3>
<a href="[À MODIFIER - ../../../example/img/image.jpg]" id="fr-download-link-6409" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
PDF – 61,88 Ko
</span>
</a>
</h3>
</div>
</li>
</ul>
</div>
dans une grille, sur 3 à 8 colonnes en version desktop
<div class="fr-downloads-group fr-downloads-group--bordered">
<p class="fr-downloads-group__title">Titre facultatif</p>
<ul>
<li>
<div class="fr-download">
<h3>
<a href="[À MODIFIER - ../../../example/img/image.jpg]" id="fr-download-link-6414" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
PDF – 61,88 Ko
</span>
</a>
</h3>
</div>
</li>
<li>
<div class="fr-download">
<h3>
<a href="[À MODIFIER - ../../../example/img/image.jpg]" id="fr-download-link-6415" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
PDF – 61,88 Ko
</span>
</a>
</h3>
</div>
</li>
<li>
<div class="fr-download">
<h3>
<a href="[À MODIFIER - ../../../example/img/image.jpg]" id="fr-download-link-6416" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
PDF – 61,88 Ko
</span>
</a>
</h3>
</div>
</li>
</ul>
</div>
Le modificateur "--card" sur un download ou un groupe de download permet d'appliquer le style des carte. Il permet aussi d'ajouter un texte de description (facultatif).
dans une grille de 6 colonnes en version desktop
Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…
<div class="fr-download fr-enlarge-link fr-download--card">
<h3>
<a href="[À MODIFIER - ../../../example/img/image.jpg]" id="fr-download-link-6420" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
JPG – 61,88 ko
</span>
</a>
</h3>
<p class="fr-download__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p>
</div>
Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…
Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…
Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…
Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…
<div class="fr-grid-row fr-grid-row--gutters">
<div class="fr-col-12 fr-col-md-4">
<div class="fr-download fr-enlarge-link fr-download--card">
<h3>
<a href="[À MODIFIER - ../../../example/img/image.jpg]" id="fr-download-link-6427" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
JPG – 61,88 ko
</span>
</a>
</h3>
<p class="fr-download__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p>
</div>
</div>
<div class="fr-col-12 fr-col-md-4">
<div class="fr-download fr-enlarge-link fr-download--card">
<h3>
<a href="[À MODIFIER - ../../../example/img/image.jpg]" id="fr-download-link-6428" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
JPG – 61,88 ko
</span>
</a>
</h3>
<p class="fr-download__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p>
</div>
</div>
<div class="fr-col-12 fr-col-md-4">
<div class="fr-download fr-enlarge-link fr-download--card">
<h3>
<a href="[À MODIFIER - ../../../example/img/image.jpg]" id="fr-download-link-6429" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
JPG – 61,88 ko
</span>
</a>
</h3>
<p class="fr-download__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p>
</div>
</div>
<div class="fr-col-12 fr-col-md-4">
<div class="fr-download fr-enlarge-link fr-download--card">
<h3>
<a href="[À MODIFIER - ../../../example/img/image.jpg]" id="fr-download-link-6430" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
JPG – 61,88 ko
</span>
</a>
</h3>
<p class="fr-download__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p>
</div>
</div>
</div>
Si la langue du fichier à télécharger est différente de celle de la page courante, il est nécéssaire d'ajouter l'attribut hreflang avec comme valeur le code langue (ex: hreflang="en") sur le lien. L’attribut prend pour valeur le code langue selon la norme ISO 639-1 (Liste des codes ISO 639-1). Il faut aussi ajouter le nom de la langue dans les détails (sauf remplissage automatique en js)
<div class="fr-download">
<h3>
<a href="[À MODIFIER - ../../../example/img/image.jpg]" id="fr-download-link-6434" download hreflang="en" class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
JPG – 61,88 ko – Anglais
</span>
</a>
</h3>
</div>
Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…
<div class="fr-download fr-enlarge-link fr-download--card">
<h3>
<a href="[À MODIFIER - ../../../example/img/image.jpg]" id="fr-download-link-6437" download hreflang="en" class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
JPG – 61,88 ko – Anglais
</span>
</a>
</h3>
<p class="fr-download__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p>
</div>
Un utilitaire JS est disponible via l'attribut "data-fr-assess-file" pour remplacer le contenu du détails (type, poids, langue).
Le type du fichier est déterminé par son extension depuis l'attribut href.
Pour récupérer le poids, il est nécessaire que le fichier soit sur le même domaine ou que celui-ci autorise les requêtes cross-domain. Par défaut, l'unité de poids est l'octet. Il est possible d'opter pour l'unité bytes en ajoutant l'option dans l'attribut data-fr-assess-file="bytes"
La langue du fichier (si différente) doit être définie par son code langue dans l'attribut hreflang
<div class="fr-download">
<h3>
<a href="../../../dist/favicon/favicon.ico" data-fr-assess-file id="fr-download-link-6441" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
</span>
</a>
</h3>
</div>
Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…
<div class="fr-download fr-enlarge-link fr-download--card">
<h3>
<a href="../../../dist/favicon/favicon.ico" data-fr-assess-file id="fr-download-link-6444" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
</span>
</a>
</h3>
<p class="fr-download__desc">Description texte body small regular consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore…</p>
</div>
<div class="fr-download">
<h3>
<a href="../../../dist/favicon/favicon.ico" data-fr-assess-file id="fr-download-link-6447" download hreflang="en" class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
<span class="fr-download__detail">
</span>
</a>
</h3>
</div>
<div class="fr-download" lang="en">
<h3>
<a href="../../../dist/favicon/favicon.ico" data-fr-assess-file="bytes" id="fr-download-link-6450" download hreflang="en" class="fr-download__link">Download file lorem ipsum
<span class="fr-download__detail">
</span>
</a>
</h3>
</div>