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-3165" href="#">
Label lien
</a>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3168" href="#">
Label lien
</a>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3171" href="#">
Label lien
</a>
<a class="fr-link fr-link--sm" id="link-3174" href="#">
Label lien
</a>
<a class="fr-link fr-link--lg" id="link-3177" href="#">
Label lien
</a>
<a class="fr-link" id="link-3180" 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-3191" href="#">
Label lien 1
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3192" href="#">
Label lien 2
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3193" href="#">
Label lien 3
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3194" href="#">
Label lien 4
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3195" href="#">
Label lien 5
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3196" href="#">
Label lien 6
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3197" href="#">
Label lien 7
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3198" href="#">
Label lien 8
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3199" href="#">
Label lien 9
</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--sm">
<li>
<a class="fr-link" id="link-3210" href="#">
Label lien 1
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3211" href="#">
Label lien 2
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3212" href="#">
Label lien 3
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3213" href="#">
Label lien 4
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3214" href="#">
Label lien 5
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3215" href="#">
Label lien 6
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3216" href="#">
Label lien 7
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3217" href="#">
Label lien 8
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3218" href="#">
Label lien 9
</a>
</li>
</ul>
<ul class="fr-links-group fr-links-group--lg">
<li>
<a class="fr-link" id="link-3229" href="#">
Label lien 1
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3230" href="#">
Label lien 2
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3231" href="#">
Label lien 3
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3232" href="#">
Label lien 4
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3233" href="#">
Label lien 5
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3234" href="#">
Label lien 6
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3235" href="#">
Label lien 7
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3236" href="#">
Label lien 8
</a>
</li>
<li>
<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3237" href="#">
Label lien 9
</a>
</li>
</ul>
Le lien de “retour en haut de page” est une ancre vers un élément dont l’id est "top".
Afin de le faire fonctionner correctement, il est nécessaire d’ajouter l’attribut id (id="top") sur l’élement le plus haut de la page comme le body (<body id="top" ...>) ou les liens d’évitement (<div class="fr-skiplinks" id="top">), afin que le focus de navigation soit lui aussi replacé en haut de page.
Le lien haut de page est un lien classique fr-link composé de l'icone arrow-up-fill, alignée à gauche, et du label "Haut de page".
Le lien peut être aligné sur la gauche ou la droite du contenu.
Actuce: Pour aligner le lien à droite, l'insérer dans une <div class="fr-grid-row fr-grid-row--right">.
<a class="fr-link fr-icon-arrow-up-fill fr-link--icon-left" id="link-3240" href="#top">
Haut de page
</a>