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" href="#">
Label lien
</a>
<a class="fr-link fr-fi-arrow-left-line fr-link--icon-left" href="#">
Label lien
</a>
<a class="fr-link fr-fi-arrow-right-line fr-link--icon-right" href="#">
Label lien
</a>
<a class="fr-link fr-link--sm" href="#">
Label lien
</a>
<a class="fr-link fr-link--lg" href="#">
Label lien
</a>
<a class="fr-link" aria-disabled="true" role="link">
Label lien
</a>
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-fi-arrow-up-fill fr-link--icon-left" href="#top">
Haut de page
</a>