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-4683" href="#">Label lien</a>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4686" href="#">Label lien</a>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4689" href="#">Label lien</a>
<a class="fr-link fr-link--sm" id="link-4692" href="#">Label lien</a>
<a class="fr-link fr-link--lg" id="link-4695" href="#">Label lien</a>
<a class="fr-link" id="link-4698" 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-4701" 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-4712" href="#">Label lien 1</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4713" href="#">Label lien 2</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4714" href="#">Label lien 3</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4715" href="#">Label lien 4</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4716" href="#">Label lien 5</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4717" href="#">Label lien 6</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4718" href="#">Label lien 7</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4719" href="#">Label lien 8</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4720" href="#">Label lien 9</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--sm">
<li>
<a class="fr-link" id="link-4731" href="#">Label lien 1</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4732" href="#">Label lien 2</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4733" href="#">Label lien 3</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4734" href="#">Label lien 4</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4735" href="#">Label lien 5</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4736" href="#">Label lien 6</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4737" href="#">Label lien 7</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4738" href="#">Label lien 8</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4739" href="#">Label lien 9</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--lg">
<li>
<a class="fr-link" id="link-4750" href="#">Label lien 1</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4751" href="#">Label lien 2</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4752" href="#">Label lien 3</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4753" href="#">Label lien 4</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4754" href="#">Label lien 5</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4755" href="#">Label lien 6</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4756" href="#">Label lien 7</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4757" href="#">Label lien 8</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4758" href="#">Label lien 9</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--inline">
<li>
<a class="fr-link" id="link-4769" href="#">Label lien 1</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4770" href="#">Label lien 2</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4771" href="#">Label lien 3</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4772" href="#">Label lien 4</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4773" href="#">Label lien 5</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4774" href="#">Label lien 6</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4775" href="#">Label lien 7</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4776" href="#">Label lien 8</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4777" href="#">Label lien 9</a>
</li>
</ul>