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-3932" href="#">
Label lien
</a>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3935" href="#">
Label lien
</a>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3938" href="#">
Label lien
</a>
<a class="fr-link fr-link--sm" id="link-3941" href="#">
Label lien
</a>
<a class="fr-link fr-link--lg" id="link-3944" href="#">
Label lien
</a>
<a class="fr-link" id="link-3947" 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-3958" href="#">
Label lien 1
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3959" href="#">
Label lien 2
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3960" href="#">
Label lien 3
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3961" href="#">
Label lien 4
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3962" href="#">
Label lien 5
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3963" href="#">
Label lien 6
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3964" href="#">
Label lien 7
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3965" href="#">
Label lien 8
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3966" href="#">
Label lien 9
</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--sm">
<li>
<a class="fr-link" id="link-3977" href="#">
Label lien 1
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3978" href="#">
Label lien 2
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3979" href="#">
Label lien 3
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3980" href="#">
Label lien 4
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3981" href="#">
Label lien 5
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3982" href="#">
Label lien 6
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3983" href="#">
Label lien 7
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3984" href="#">
Label lien 8
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3985" href="#">
Label lien 9
</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--lg">
<li>
<a class="fr-link" id="link-3996" href="#">
Label lien 1
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3997" href="#">
Label lien 2
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3998" href="#">
Label lien 3
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3999" href="#">
Label lien 4
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4000" href="#">
Label lien 5
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4001" href="#">
Label lien 6
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4002" href="#">
Label lien 7
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4003" href="#">
Label lien 8
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4004" href="#">
Label lien 9
</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--inline">
<li>
<a class="fr-link" id="link-4015" href="#">
Label lien 1
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4016" href="#">
Label lien 2
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4017" href="#">
Label lien 3
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4018" href="#">
Label lien 4
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4019" href="#">
Label lien 5
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4020" href="#">
Label lien 6
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4021" href="#">
Label lien 7
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-4022" href="#">
Label lien 8
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-4023" href="#">
Label lien 9
</a>
</li>
</ul>