Retour

Lien (link)

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

Lien seul

<a class="fr-link" id="link-3165" href="#">
    Label lien
</a>

Lien icon à gauche

<a class="fr-link fr-icon-arrow-left-line fr-link--icon-left" id="link-3168" href="#">
    Label lien
</a>

Lien icon à droite

<a class="fr-link fr-icon-arrow-right-line fr-link--icon-right" id="link-3171" href="#">
    Label lien
</a>

Lien seul SM

<a class="fr-link fr-link--sm" id="link-3174" href="#">
    Label lien
</a>

Lien seul LG

<a class="fr-link fr-link--lg" id="link-3177" href="#">
    Label lien
</a>

Lien seul désactivé

<a class="fr-link" id="link-3180" aria-disabled="true" role="link">
    Label lien
</a>

Groupe de liens

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.

Groupe de liens

<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>

Groupe de liens sm

<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>

Groupe de liens lg

<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>

Retour en haut de page

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">.

Lien Haut de page - id="top"

<a class="fr-link fr-icon-arrow-up-fill fr-link--icon-left" id="link-3240" href="#top">
    Haut de page
</a>

Paramètres d’affichage

Choisissez un thème pour personnaliser l’apparence du site.