DSFR v1.12.1

Retour

Téléchargement de fichier (download)

Ce composant est déprécié. La fonctionnalité "téléchargement de fichier" est maintenant disponible directement sur le composant carte et le composant lien.

Documentation

Dépréciation

Les exemples suivants sont dépréciés, ne pas utiliser comme référence
Pour support des versions précédentes

Téléchargement de fichier

Il 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

Lien de téléchargment

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.

Lien de téléchargement seul

<div class="fr-download">
    <h3>
        <a href="[À MODIFIER - ../../../../example/img/image.jpg]" id="fr-download-link-8098" 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>

Groupe de liens de téléchargement

<div class="fr-downloads-group">
    <ul>
        <li>
            <div class="fr-download">
                <h3>
                    <a href="[À MODIFIER - ../../../../example/img/image.jpg]" id="fr-download-link-8104" 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-8105" 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-8106" 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>

Groupe de liens de téléchargement avec bordure

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-8111" 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-8112" 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-8113" 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>

Carte de téléchargement

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).

Carte de téléchargement

dans une grille de 6 colonnes en version desktop

<div class="fr-download fr-enlarge-link fr-download--card">
    <h3>
        <a href="[À MODIFIER - ../../../../example/img/image.jpg]" id="fr-download-link-8117" 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>

Cartes de téléchargement en grille

<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-8124" 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-8125" 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-8126" 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-8127" 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>

Fichier d'une autre langue

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)

Lien de téléchargement - langue étrangère

<div class="fr-download">
    <h3>
        <a href="[À MODIFIER - ../../../../example/img/image.jpg]" id="fr-download-link-8131" 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>

Carte de téléchargement - langue étrangère

<div class="fr-download fr-enlarge-link fr-download--card">
    <h3>
        <a href="[À MODIFIER - ../../../../example/img/image.jpg]" id="fr-download-link-8134" 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>

Remplissage automatique des informations du fichier

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

Lien de téléchargement remplissage automatique des détails

<div class="fr-download">
    <h3>
        <a href="../../../../dist/favicon/favicon.ico" data-fr-assess-file id="fr-download-link-8138" download class="fr-download__link">Télécharger le document lorem ipsum sit dolores amet
            <span class="fr-download__detail">
            </span>
        </a>
    </h3>
</div>

Carte de téléchargement remplissage automatique des détails

<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-8141" 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>

Remplissage automatique des détails + langue différente

<div class="fr-download">
    <h3>
        <a href="../../../../dist/favicon/favicon.ico" data-fr-assess-file id="fr-download-link-8144" 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>

Poids du fichier en Bytes

<div class="fr-download" lang="en">
    <h3>
        <a href="../../../../dist/favicon/favicon.ico" data-fr-assess-file="bytes" id="fr-download-link-8147" download hreflang="en" class="fr-download__link">Download file lorem ipsum
            <span class="fr-download__detail">
            </span>
        </a>
    </h3>
</div>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.