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

<div id="card-1943" class="village-card village-enlarge-link village-card--sm village-card--download">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-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="village-card__desc">Texte de description (facultatif)</p>
            <div class="village-card__end">
                <p class="village-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-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

<div id="card-1946" class="village-card village-enlarge-link village-card--download">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-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="village-card__desc">Texte de description (facultatif)</p>
            <div class="village-card__end">
                <p class="village-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-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

<div id="card-1949" class="village-card village-enlarge-link village-card--lg village-card--download">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-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="village-card__desc">Texte de description (facultatif)</p>
            <div class="village-card__end">
                <p class="village-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-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

<div id="card-1953" class="village-card village-enlarge-link village-card--download">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-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="village-card__desc">Texte de description (facultatif)</p>
            <div class="village-card__end">
                <p class="village-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
</div>

Carte de téléchargement horizontale, sans image

<div id="card-1956" class="village-card village-enlarge-link village-card--horizontal village-card--download">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-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="village-card__desc">Texte de description (facultatif)</p>
            <div class="village-card__end">
                <p class="village-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
</div>

Carte de téléchargement, image 3x4

<div id="card-1960" class="village-card village-enlarge-link village-card--download">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-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="village-card__desc">Texte de description (facultatif)</p>
            <div class="village-card__end">
                <p class="village-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-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

<div id="card-1963" class="village-card village-enlarge-link village-card--download">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-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="village-card__desc">Texte de description (facultatif)</p>
            <div class="village-card__end">
                <p class="village-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-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

<div id="card-1966" class="village-card village-enlarge-link village-card--download">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-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="village-card__desc">Texte de description (facultatif)</p>
            <div class="village-card__end">
                <p class="village-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-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

<div id="card-1970" class="village-card village-enlarge-link village-card--download">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-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="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-badges-group">
                    <li>
                        <p class="village-badge village-badge--village-color10">label badge</p>
                    </li>
                    <li>
                        <p class="village-badge village-badge--village-color10">label badge</p>
                    </li>
                </ul>
                <p class="village-card__detail village-icon-warning-fill">détail (optionnel)</p>
            </div>
            <div class="village-card__end">
                <p class="village-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-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

<div id="card-1973" class="village-card village-enlarge-link village-card--download">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-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="village-card__end">
                <p class="village-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
</div>

Carte de téléchargement, avec tags

<div id="card-1978" class="village-card village-enlarge-link village-card--download">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-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="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__start">
                <ul class="village-tags-group">
                    <li>
                        <p class="village-tag" id="tag-1979">label tag</p>
                    </li>
                    <li>
                        <p class="village-tag" id="tag-1980">label tag</p>
                    </li>
                </ul>
            </div>
            <div class="village-card__end">
                <p class="village-card__detail">PNG - 1,1 ko</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-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-village-assess-file permet de remplir automatiquement le detail depuis les informations du fichier (extension, poids, langue)

<div id="card-1984" class="village-card village-enlarge-link village-card--download">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a data-village-assess-file href="/example/img/placeholder.3x4.png" download>Télécharger le/la [Typologie de document] « [Nom du document] »</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__end">
                <p class="village-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="village-card__header">
        <div class="village-card__img">
            <img class="village-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

<div id="card-1987" class="village-card village-enlarge-link village-card--download">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-card__title">
                <a data-village-assess-file="bytes" href="/example/img/placeholder.3x4.png" download>Download the french document lorem ipsum</a>
            </h3>
            <p class="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__end">
                <p class="village-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="village-card__header">
        <div class="village-card__img">
            <img class="village-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 <b>hreflang</b> 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 (<a href="https://fr.wikipedia.org/wiki/Liste_des_codes_ISO_639-1" target="_blank">Liste des codes ISO 639-1</a>).<br> Il faut aussi <b>ajouter le nom de la langue dans les détails</b> (sauf remplissage automatique en js)

<div id="card-1991" class="village-card village-enlarge-link village-card--download">
    <div class="village-card__body">
        <div class="village-card__content">
            <h3 class="village-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="village-card__desc">Lorem [...] elit ut.</p>
            <div class="village-card__end">
                <p class="village-card__detail">PDF - 1,3 Mo - Anglais</p>
            </div>
        </div>
    </div>
    <div class="village-card__header">
        <div class="village-card__img">
            <img class="village-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.