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-3912" href="#">
Label lien
</a>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3915" href="#">
Label lien
</a>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3918" href="#">
Label lien
</a>
<a class="fr-link fr-link--sm" id="link-3921" href="#">
Label lien
</a>
<a class="fr-link fr-link--lg" id="link-3924" href="#">
Label lien
</a>
<a class="fr-link" id="link-3927" aria-disabled="true" role="link">
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-3938" href="#">
Label lien 1
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3939" href="#">
Label lien 2
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3940" href="#">
Label lien 3
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3941" href="#">
Label lien 4
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3942" href="#">
Label lien 5
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3943" href="#">
Label lien 6
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3944" href="#">
Label lien 7
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3945" href="#">
Label lien 8
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3946" href="#">
Label lien 9
</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--sm">
<li>
<a class="fr-link" id="link-3957" href="#">
Label lien 1
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3958" href="#">
Label lien 2
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3959" href="#">
Label lien 3
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3960" href="#">
Label lien 4
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3961" href="#">
Label lien 5
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3962" href="#">
Label lien 6
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3963" href="#">
Label lien 7
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3964" href="#">
Label lien 8
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3965" href="#">
Label lien 9
</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--lg">
<li>
<a class="fr-link" id="link-3976" href="#">
Label lien 1
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3977" href="#">
Label lien 2
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3978" href="#">
Label lien 3
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3979" href="#">
Label lien 4
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3980" href="#">
Label lien 5
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3981" href="#">
Label lien 6
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3982" href="#">
Label lien 7
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3983" href="#">
Label lien 8
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3984" href="#">
Label lien 9
</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--inline">
<li>
<a class="fr-link" id="link-3995" href="#">
Label lien 1
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3996" href="#">
Label lien 2
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3997" href="#">
Label lien 3
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3998" href="#">
Label lien 4
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3999" href="#">
Label lien 5
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4000" href="#">
Label lien 6
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4001" href="#">
Label lien 7
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4002" href="#">
Label lien 8
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4003" href="#">
Label lien 9
</a>
</li>
</ul>