Retour

Lien (link)

Le lien permet la navigation entre une page et un autre contenu au sein de la même page, du même site ou externe. Pour les actions d’un autre type - comme la soumission d’un formulaire - il faut utiliser le composant bouton.

Documentation

Lien seul

<a class="village-link" id="link-4683" href="#">Label lien</a>

Lien icon à gauche

<a class="village-link village-icon-arrow-left-line village-link--icon-left" id="link-4686" href="#">Label lien</a>

Lien icon à droite

<a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4689" href="#">Label lien</a>

Lien seul SM

<a class="village-link village-link--sm" id="link-4692" href="#">Label lien</a>

Lien seul LG

<a class="village-link village-link--lg" id="link-4695" href="#">Label lien</a>

Lien seul désactivé

<a class="village-link" id="link-4698" aria-disabled="true" role="link">Label lien</a>

Lien externe

<a class="village-link" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" id="link-4701" href="#">Label lien</a>

Groupe de liens

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

Groupe de liens

<ul class="village-links-group">
    <li>
        <a class="village-link" id="link-4712" href="#">Label lien 1</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-left-line village-link--icon-left" id="link-4713" href="#">Label lien 2</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4714" href="#">Label lien 3</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4715" href="#">Label lien 4</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-left-line village-link--icon-left" id="link-4716" href="#">Label lien 5</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4717" href="#">Label lien 6</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4718" href="#">Label lien 7</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-left-line village-link--icon-left" id="link-4719" href="#">Label lien 8</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4720" href="#">Label lien 9</a>
    </li>
</ul>

Groupe de liens sm

<ul class="village-links-group village-links-group--sm">
    <li>
        <a class="village-link" id="link-4731" href="#">Label lien 1</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-left-line village-link--icon-left" id="link-4732" href="#">Label lien 2</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4733" href="#">Label lien 3</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4734" href="#">Label lien 4</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-left-line village-link--icon-left" id="link-4735" href="#">Label lien 5</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4736" href="#">Label lien 6</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4737" href="#">Label lien 7</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-left-line village-link--icon-left" id="link-4738" href="#">Label lien 8</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4739" href="#">Label lien 9</a>
    </li>
</ul>

Groupe de liens lg

<ul class="village-links-group village-links-group--lg">
    <li>
        <a class="village-link" id="link-4750" href="#">Label lien 1</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-left-line village-link--icon-left" id="link-4751" href="#">Label lien 2</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4752" href="#">Label lien 3</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4753" href="#">Label lien 4</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-left-line village-link--icon-left" id="link-4754" href="#">Label lien 5</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4755" href="#">Label lien 6</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4756" href="#">Label lien 7</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-left-line village-link--icon-left" id="link-4757" href="#">Label lien 8</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4758" href="#">Label lien 9</a>
    </li>
</ul>

Groupe de liens en ligne

<ul class="village-links-group village-links-group--inline">
    <li>
        <a class="village-link" id="link-4769" href="#">Label lien 1</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-left-line village-link--icon-left" id="link-4770" href="#">Label lien 2</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4771" href="#">Label lien 3</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4772" href="#">Label lien 4</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-left-line village-link--icon-left" id="link-4773" href="#">Label lien 5</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4774" href="#">Label lien 6</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4775" href="#">Label lien 7</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-left-line village-link--icon-left" id="link-4776" href="#">Label lien 8</a>
    </li>
    <li>
        <a class="village-link village-icon-arrow-right-line village-link--icon-right" id="link-4777" href="#">Label lien 9</a>
    </li>
</ul>

Autres versions

Paramètres d’affichage

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