Retour

Badge (badge)

Le composant badge permet de mettre en avant une information de type “statut” ou “état” sur un élément du site.

Documentation

Badge seul

Label badge

<p id="badge-1220" class="village-badge">Label badge</p>

Il est conseillé d'ajouter une balise span avec la classe village-ellipsis à l'interieur du badge pour que celui ci reste sur une seule ligne, avec le texte coupé par des points de suspensions.

Badge sur une seule ligne - ellipsis

Label badge très long, coupé par des points de suspensions lorsque le label dépasse la largeur du conteneur

<p class="village-badge">
    <span class="village-ellipsis">Label badge très long, coupé par des points de suspensions lorsque le label dépasse la largeur du conteneur</span>
</p>

Badge - succès

Label badge

<p id="badge-1223" class="village-badge village-badge--success village-badge village-badge--success">Label badge</p>

Badge - succès sans icone

Label badge

<p id="badge-1225" class="village-badge village-badge--success village-badge--no-icon village-badge village-badge--success village-badge--no-icon">Label badge</p>

Badge - erreur

Label badge

<p id="badge-1227" class="village-badge village-badge--error village-badge village-badge--error">Label badge</p>

Badge - erreur sans icone

Label badge

<p id="badge-1229" class="village-badge village-badge--error village-badge--no-icon village-badge village-badge--error village-badge--no-icon">Label badge</p>

Badge - information

Label badge

<p id="badge-1231" class="village-badge village-badge--info village-badge village-badge--info">Label badge</p>

Badge - information sans icone

Label badge

<p id="badge-1233" class="village-badge village-badge--info village-badge--no-icon village-badge village-badge--info village-badge--no-icon">Label badge</p>

Badge - avertissement

Label badge

<p id="badge-1235" class="village-badge village-badge--warning village-badge village-badge--warning">Label badge</p>

Badge - avertissement sans icone

Label badge

<p id="badge-1237" class="village-badge village-badge--warning village-badge--no-icon village-badge village-badge--warning village-badge--no-icon">Label badge</p>

Badge - nouveauté

Label badge

<p id="badge-1239" class="village-badge village-badge--new village-badge village-badge--new">Label badge</p>

Badge - nouveauté sans icone

Label badge

<p id="badge-1241" class="village-badge village-badge--new village-badge--no-icon village-badge village-badge--new village-badge--no-icon">Label badge</p>

Badge - personnalisé village-color6

Label badge

<p id="badge-1243" class="village-badge village-badge--village-color6 village-badge village-badge--village-color6">Label badge</p>

Badge - personnalisé village-color15

Label badge

<p id="badge-1245" class="village-badge village-badge--village-color15 village-badge village-badge--village-color15">Label badge</p>

Badge - personnalisé village-color10

Label badge

<p id="badge-1247" class="village-badge village-badge--village-color10 village-badge village-badge--village-color10">Label badge</p>

Badge taille SM

Label badge

<p id="badge-1250" class="village-badge village-badge--sm">Label badge</p>

Badge SM - succès

Label badge

<p id="badge-1252" class="village-badge village-badge--sm village-badge--success village-badge village-badge--sm village-badge--success">Label badge</p>

Badge SM - erreur

Label badge

<p id="badge-1254" class="village-badge village-badge--sm village-badge--error village-badge village-badge--sm village-badge--error">Label badge</p>

Badge SM - information

Label badge

<p id="badge-1256" class="village-badge village-badge--sm village-badge--info village-badge village-badge--sm village-badge--info">Label badge</p>

Badge SM - avertissement

Label badge

<p id="badge-1258" class="village-badge village-badge--sm village-badge--warning village-badge village-badge--sm village-badge--warning">Label badge</p>

Badge SM - nouveauté

Label badge

<p id="badge-1260" class="village-badge village-badge--sm village-badge--new village-badge village-badge--sm village-badge--new">Label badge</p>

Badge SM - personnalisé village-color10

Label badge

<p id="badge-1262" class="village-badge village-badge--sm village-badge--village-color10 village-badge village-badge--sm village-badge--village-color10">Label badge</p>

Groupe de badges

Lorsque que l'on a plus d'un badge, il convient d'utiliser un groupe de badges.
La taille de tous les badges peut être définie au niveau du groupe.

Groupe de badges

  • Label badge 1

  • Label badge 2

  • Label badge 3

  • Label badge 4

  • Label badge 5

  • Label badge 6

  • Label badge 7

  • Label badge 8

  • Label badge 9

<ul class="village-badges-group">
    <li>
        <p id="badge-1264" class="village-badge village-badge">Label badge 1</p>
    </li>
    <li>
        <p id="badge-1265" class="village-badge village-badge">Label badge 2</p>
    </li>
    <li>
        <p id="badge-1266" class="village-badge village-badge">Label badge 3</p>
    </li>
    <li>
        <p id="badge-1267" class="village-badge village-badge">Label badge 4</p>
    </li>
    <li>
        <p id="badge-1268" class="village-badge village-badge">Label badge 5</p>
    </li>
    <li>
        <p id="badge-1269" class="village-badge village-badge">Label badge 6</p>
    </li>
    <li>
        <p id="badge-1270" class="village-badge village-badge">Label badge 7</p>
    </li>
    <li>
        <p id="badge-1271" class="village-badge village-badge">Label badge 8</p>
    </li>
    <li>
        <p id="badge-1272" class="village-badge village-badge">Label badge 9</p>
    </li>
</ul>

Groupe de badges SM

  • Label badge 1

  • Label badge 2

  • Label badge 3

  • Label badge 4

  • Label badge 5

  • Label badge 6

  • Label badge 7

  • Label badge 8

  • Label badge 9

<ul class="village-badges-group village-badges-group--sm">
    <li>
        <p id="badge-1274" class="village-badge village-badge">Label badge 1</p>
    </li>
    <li>
        <p id="badge-1275" class="village-badge village-badge">Label badge 2</p>
    </li>
    <li>
        <p id="badge-1276" class="village-badge village-badge">Label badge 3</p>
    </li>
    <li>
        <p id="badge-1277" class="village-badge village-badge">Label badge 4</p>
    </li>
    <li>
        <p id="badge-1278" class="village-badge village-badge">Label badge 5</p>
    </li>
    <li>
        <p id="badge-1279" class="village-badge village-badge">Label badge 6</p>
    </li>
    <li>
        <p id="badge-1280" class="village-badge village-badge">Label badge 7</p>
    </li>
    <li>
        <p id="badge-1281" class="village-badge village-badge">Label badge 8</p>
    </li>
    <li>
        <p id="badge-1282" class="village-badge village-badge">Label badge 9</p>
    </li>
</ul>

Paramètres d’affichage

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