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<a class="fr-link" id="link-4325" href="#">Label lien</a>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4328" href="#">Label lien</a>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4331" href="#">Label lien</a>
<a class="fr-link fr-link--sm" id="link-4334" href="#">Label lien</a>
<a class="fr-link fr-link--lg" id="link-4337" href="#">Label lien</a>
<a class="fr-link" id="link-4340" aria-disabled="true" role="link">Label lien</a>
<a class="fr-link" target="_blank" rel="noopener external" title="[À MODIFIER - Intitulé] - nouvelle fenêtre" id="link-4343" href="#">Label lien</a>
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.
<ul class="fr-links-group">
<li>
<a class="fr-link" id="link-4354" href="#">Label lien 1</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4355" href="#">Label lien 2</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4356" href="#">Label lien 3</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4357" href="#">Label lien 4</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4358" href="#">Label lien 5</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4359" href="#">Label lien 6</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4360" href="#">Label lien 7</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4361" href="#">Label lien 8</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4362" href="#">Label lien 9</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--sm">
<li>
<a class="fr-link" id="link-4373" href="#">Label lien 1</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4374" href="#">Label lien 2</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4375" href="#">Label lien 3</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4376" href="#">Label lien 4</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4377" href="#">Label lien 5</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4378" href="#">Label lien 6</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4379" href="#">Label lien 7</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4380" href="#">Label lien 8</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4381" href="#">Label lien 9</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--lg">
<li>
<a class="fr-link" id="link-4392" href="#">Label lien 1</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4393" href="#">Label lien 2</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4394" href="#">Label lien 3</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4395" href="#">Label lien 4</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4396" href="#">Label lien 5</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4397" href="#">Label lien 6</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4398" href="#">Label lien 7</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4399" href="#">Label lien 8</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4400" href="#">Label lien 9</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--inline">
<li>
<a class="fr-link" id="link-4411" href="#">Label lien 1</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4412" href="#">Label lien 2</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4413" href="#">Label lien 3</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4414" href="#">Label lien 4</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4415" href="#">Label lien 5</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4416" href="#">Label lien 6</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4417" href="#">Label lien 7</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4418" href="#">Label lien 8</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4419" href="#">Label lien 9</a>
</li>
</ul>