Retour

Carte (card)

La carte donne des aperçus cliquables d’une page de contenu à l’utilisateur. Elle fait généralement partie d'une collection ou liste d’aperçus de contenu similaires. La carte n’est jamais présentée de manière isolée.

Documentation

Carte de téléchargement sm

dans une grille sur 4 à 6 colonnes en version desktop

Télécharger le/la [Typologie de document] « [Nom du document] »

Texte de description (facultatif)

PNG - 1,1 ko

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1925" class="fr-card fr-enlarge-link fr-card--sm fr-card--download">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="/example/img/placeholder.3x4.png" download>
                    Télécharger le/la [Typologie de document] « [Nom du document] »
                </a>
            </h3>
            <p class="fr-card__desc">Texte de description (facultatif)</p>
            <div class="fr-card__end">
                <p class="fr-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img" src="../../../../example/img/placeholder.A4.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte de téléchargement md

dans une grille sur 6 à 8 colonnes en version desktop

Télécharger le/la [Typologie de document] « [Nom du document] »

Texte de description (facultatif)

PNG - 1,1 ko

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1928" class="fr-card fr-enlarge-link fr-card--download">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="/example/img/placeholder.3x4.png" download>
                    Télécharger le/la [Typologie de document] « [Nom du document] »
                </a>
            </h3>
            <p class="fr-card__desc">Texte de description (facultatif)</p>
            <div class="fr-card__end">
                <p class="fr-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img" src="../../../../example/img/placeholder.A4.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte de téléchargement lg

dans une grille sur 8 à 12 colonnes en version desktop

Télécharger le/la [Typologie de document] « [Nom du document] »

Texte de description (facultatif)

PNG - 1,1 ko

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1931" class="fr-card fr-enlarge-link fr-card--lg fr-card--download">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="/example/img/placeholder.3x4.png" download>
                    Télécharger le/la [Typologie de document] « [Nom du document] »
                </a>
            </h3>
            <p class="fr-card__desc">Texte de description (facultatif)</p>
            <div class="fr-card__end">
                <p class="fr-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img" src="../../../../example/img/placeholder.A4.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte de téléchargement, sans image

Télécharger le/la [Typologie de document] « [Nom du document] »

Texte de description (facultatif)

PNG - 1,1 ko

<div id="card-1935" class="fr-card fr-enlarge-link fr-card--download">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="/example/img/placeholder.3x4.png" download>
                    Télécharger le/la [Typologie de document] « [Nom du document] »
                </a>
            </h3>
            <p class="fr-card__desc">Texte de description (facultatif)</p>
            <div class="fr-card__end">
                <p class="fr-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
</div>

Carte de téléchargement horizontale, sans image

Télécharger le/la [Typologie de document] « [Nom du document] »

Texte de description (facultatif)

PNG - 1,1 ko

<div id="card-1938" class="fr-card fr-enlarge-link fr-card--horizontal fr-card--download">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="/example/img/placeholder.3x4.png" download>
                    Télécharger le/la [Typologie de document] « [Nom du document] »
                </a>
            </h3>
            <p class="fr-card__desc">Texte de description (facultatif)</p>
            <div class="fr-card__end">
                <p class="fr-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
</div>

Carte de téléchargement, image 3x4

Télécharger le/la [Typologie de document] « [Nom du document] »

Texte de description (facultatif)

PNG - 1,1 ko

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1942" class="fr-card fr-enlarge-link fr-card--download">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="/example/img/placeholder.3x4.png" download>
                    Télécharger le/la [Typologie de document] « [Nom du document] »
                </a>
            </h3>
            <p class="fr-card__desc">Texte de description (facultatif)</p>
            <div class="fr-card__end">
                <p class="fr-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img" src="../../../../example/img/placeholder.A4.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte de téléchargement, image 4x3

Télécharger le/la [Typologie de document] « [Nom du document] »

Texte de description (facultatif)

PNG - 1,1 ko

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1945" class="fr-card fr-enlarge-link fr-card--download">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="/example/img/placeholder.3x4.png" download>
                    Télécharger le/la [Typologie de document] « [Nom du document] »
                </a>
            </h3>
            <p class="fr-card__desc">Texte de description (facultatif)</p>
            <div class="fr-card__end">
                <p class="fr-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img" src="../../../../example/img/placeholder.4x3.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte de téléchargement, image 32x9

Télécharger le/la [Typologie de document] « [Nom du document] »

Texte de description (facultatif)

PNG - 1,1 ko

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1948" class="fr-card fr-enlarge-link fr-card--download">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="/example/img/placeholder.3x4.png" download>
                    Télécharger le/la [Typologie de document] « [Nom du document] »
                </a>
            </h3>
            <p class="fr-card__desc">Texte de description (facultatif)</p>
            <div class="fr-card__end">
                <p class="fr-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img" src="../../../../example/img/placeholder.32x9.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte de téléchargement, cas maximum

Télécharger le/la [Typologie de document] « [Nom du document] »

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label badge

  • label badge

détail (optionnel)

PNG - 1,1 ko

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1952" class="fr-card fr-enlarge-link fr-card--download">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="/example/img/placeholder.3x4.png" download>
                    Télécharger le/la [Typologie de document] « [Nom du document] »
                </a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-badges-group">
                    <li>
                        <p class="fr-badge fr-badge--purple-glycine">label badge</p>
                    </li>
                    <li>
                        <p class="fr-badge fr-badge--purple-glycine">label badge</p>
                    </li>
                </ul>
                <p class="fr-card__detail fr-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="fr-card__end">
                <p class="fr-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img" src="../../../../example/img/placeholder.A4.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Carte de téléchargement, cas minimum

Télécharger le/la [Typologie de document] « [Nom du document] »

PNG - 1,1 ko

<div id="card-1955" class="fr-card fr-enlarge-link fr-card--download">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="/example/img/placeholder.3x4.png" download>
                    Télécharger le/la [Typologie de document] « [Nom du document] »
                </a>
            </h3>
            <div class="fr-card__end">
                <p class="fr-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
</div>

Carte de téléchargement, avec tags

Télécharger le/la [Typologie de document] « [Nom du document] »

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

  • label tag

  • label tag

PNG - 1,1 ko

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1960" class="fr-card fr-enlarge-link fr-card--download">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="/example/img/placeholder.3x4.png" download>
                    Télécharger le/la [Typologie de document] « [Nom du document] »
                </a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__start">
                <ul class="fr-tags-group">
                    <li>
                        <p class="fr-tag" id="tag-1961">label tag</p>
                    </li>
                    <li>
                        <p class="fr-tag" id="tag-1962">label tag</p>
                    </li>
                </ul>
            </div>
            <div class="fr-card__end">
                <p class="fr-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img" src="../../../../example/img/placeholder.A4.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

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

L'attribut data-fr-assess-file permet de remplir automatiquement le detail depuis les informations du fichier (extension, poids, langue)

Télécharger le/la [Typologie de document] « [Nom du document] »

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

[À MODIFIER - Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide]

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1966" class="fr-card fr-enlarge-link fr-card--download">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a data-fr-assess-file href="/example/img/placeholder.3x4.png" download>
                    Télécharger le/la [Typologie de document] « [Nom du document] »
                </a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__end">
                <p class="fr-card__detail">[À MODIFIER - Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide]</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img" src="../../../../example/img/placeholder.A4.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Remplissage automatique des détails en Bytes

Download the french document lorem ipsum

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

[À MODIFIER - Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide]

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1969" class="fr-card fr-enlarge-link fr-card--download">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a data-fr-assess-file="bytes" href="/example/img/placeholder.3x4.png" download>
                    Download the french document lorem ipsum
                </a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__end">
                <p class="fr-card__detail">[À MODIFIER - Ce texte est remplacé en js par les informations du fichier, insérer ici les données connues ou laisser vide]</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img" src="../../../../example/img/placeholder.A4.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </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)

Télécharger le/la [Typologie de document] « [Nom du document] »

Lorem ipsum dolor sit amet, consectetur adipiscing, incididunt, ut labore et dolore magna aliqua. Vitae sapien pellentesque habitant morbi tristique senectus et

PDF - 1,3 Mo - Anglais

[À MODIFIER - vide ou texte alternatif de l’image] 

<div id="card-1973" class="fr-card fr-enlarge-link fr-card--download">
    <div class="fr-card__body">
        <div class="fr-card__content">
            <h3 class="fr-card__title">
                <a href="/example/img/placeholder.3x4.png" hreflang="en" download>
                    Télécharger le/la [Typologie de document] « [Nom du document] »
                </a>
            </h3>
            <p class="fr-card__desc">Lorem [...] elit ut.</p>
            <div class="fr-card__end">
                <p class="fr-card__detail">PDF - 1,3 Mo - Anglais</p>
            </div>
        </div>
    </div>
    <div class="fr-card__header">
        <div class="fr-card__img">
            <img class="fr-responsive-img" src="../../../../example/img/placeholder.A4.png" alt="[À MODIFIER - vide ou texte alternatif de l’image]" />
            <!-- L’alternative de l’image (attribut alt) doit toujours être présente, sa valeur peut-être vide (image n’apportant pas de sens supplémentaire au contexte) ou non (porteuse de texte ou apportant du sens) selon votre contexte -->
        </div>
    </div>
</div>

Paramètres d’affichage

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