Liens

Le DSFR distingue plusieurs types de liens selon leur cible ou le contexte où ils se trouvent :

  • les liens au fil du texte ;
  • les liens hors-texte ;
  • les liens internes (qui pointent sur le même site) ;
  • les liens externes (qui pointent en dehors du site).

Comme le DSFR applique des styles même à des liens “nus” (c’est à dire sans classe CSS spécifique) il n’est pas toujours nécessaire de passer par les helpers fournis par notre librairie. Voir le premier exemple ci-dessous.

Les helpers fournis pour les liens suivent la signature du link_to de Rails .

Vue d’ensemble

Quelques combinaisons (au fil du texte/interne, hors-texte/externe, etc.) sont exposées ici.

Code

%p
  Ceci est un
  = link_to "lien au fil du texte", "#"
  \. Ceci est un
  = link_to "lien externe au fil du texte", "#", target: "_blank", rel: "noopener"
  \.
%p= dsfr_link_to "Ceci est un lien hors-texte.", "#"
%p= dsfr_link_to "Ceci est un lien externe, hors-texte.", "#", target: "_blank", rel: "noopener"

Résultat

Ceci est un lien au fil du texte . Ceci est un lien externe au fil du texte .

Ceci est un lien hors-texte.

Ceci est un lien externe, hors-texte. 

<p>
  Ceci est un
  <a href="#">
    lien au fil du texte
  </a>
  . Ceci est un
  <a target="_blank" rel="noopener" href="#">
    lien externe au fil du texte
  </a>
  .
</p>
<p>
  <a class="fr-link" href="#">
    Ceci est un lien hors-texte.
  </a>
</p>
<p>
  <a target="_blank" rel="noopener" class="fr-link" href="#">
    Ceci est un lien externe, hors-texte.
  </a>
</p>

Lien au fil du texte

Liens sans attributs particuliers, au fil du texte. Ils n’ont pas besoin d’une classe CSS particulière et sont automatiquement récupérés par le DSFR, ce qui explique pourquoi on emploie simplement le link_to de Rails dans l’exemple ci dessous.

Ils peuvent être internes ou externes.

Code

%p
  Rendez-vous sur
  = link_to("cette page", "#")
  pour en apprendre plus.

%p
  Rendez-vous sur
  = link_to("cet autre site web", "#", target: "_blank", rel: "noopener")
  pour en apprendre toujours plus.

Résultat

Rendez-vous sur cette page pour en apprendre plus.

Rendez-vous sur cet autre site web pour en apprendre toujours plus. 

<p>
  Rendez-vous sur
  <a href="#">
    cette page
  </a>
  pour en apprendre plus.
</p>
<p>
  Rendez-vous sur
  <a target="_blank" rel="noopener" href="#">
    cet autre site web
  </a>
  pour en apprendre toujours plus.
</p>

Lien hors-texte

Liens hors-texte, indépendants, aussi appellés liens simples par le DSFR. Ils sont identifiés par la classe .fr-link et on préférera donc dsfr_link_to dans ce cas-là.

Ils peuvent être internes ou externes.

Il est possible de rajouter une icône à droite ou à gauche en passant icon_left: "nom de l'icône" dans les attributs pour les liens internes ; les liens externes sont déjà marqués par une icône donc il est fortement décommandé d’en faire usage sur eux.

Vous pouvez consulter la liste des icônes sur le site du DSFR .

Enfin vous pouvez aussi jouer de trois tailles différentes pour vos liens : sm, md (par défaut) et lg.

Code

%p= dsfr_link_to("Lien simple", "#")
%p= dsfr_link_to("Lien simple externe", "#", target: "_blank", rel: "noopener")
%p= dsfr_link_to("Lien simple avec icône à droite", "#", icon_right: "account-fill")
%p= dsfr_link_to("Lien taille petite", "#", size: "sm")
%p= dsfr_link_to("Lien taille large", "#", size: "lg")

Résultat

Lien simple

Lien simple externe

Lien taille petite

Lien taille large 

<p>
  <a class="fr-link" href="#">
    Lien simple
  </a>
</p>
<p>
  <a target="_blank" rel="noopener" class="fr-link" href="#">
    Lien simple externe
  </a>
</p>
<p>
  <a class="fr-link--icon-right fr-icon-account-fill fr-link" href="#">
    Lien simple avec icône à droite
  </a>
</p>
<p>
  <a class="fr-link--sm fr-link" href="#">
    Lien taille petite
  </a>
</p>
<p>
  <a class="fr-link--lg fr-link" href="#">
    Lien taille large
  </a>
</p>