` lorsque qu'une liste n'est pas nécessaire, par exemple : deux liens indépendants qui ne forment pas un ensemble logique. **Exemple de groupe de liens** ```HTML

``` --- ### CSS #### Installation du CSS Pour fonctionner correctement le style CSS du composant et de ses dépendances doivent être importés. L'import doit se faire avant le contenu de la page dans la partie ``, et de préférence avec les fichiers minifiés, car plus légers. Il est possible d'importer les fichiers CSS avec un niveau de granularité adapté à vos besoins. Voir le découpage des fichiers CSS du DSFR dans la [documentation dédiée](path:/getting-started/developer/get-started#les-css). :::fr-table[Dépendances CSS]{valign=top multiline=true} | Dépendance | Obligatoire | Remarque | |------------|-------------|-------------| | Core | Oui | | | Link | Oui | | | Utility | Non | Uniquement pour l'ajout d'icône | ::: **Exemple d'imports CSS** ```HTML ``` #### Variantes de taille Le lien peut avoir différentes tailles qui auront un impact sur la taille du texte et des icônes : - `fr-link--xs` : Très petit lien. - `fr-link--sm` : Petit lien. - Par défaut : Lien moyen. - `fr-link--lg` : Grand lien. **Exemples de variantes de taille** ```HTML Très petit lien Petit lien Lien moyen Grand lien ``` #### Variantes d'icônes Le Lien peut avoir une icône juxtaposé, elle est ajoutée via la **classe utilitaire d'icône** `fr-icon--NOM-ICONE` (voir [Icônes](../../../../../core/_part/doc/icon/index.md)). Cette classe peut être associée à une **classe de positionnement** de l'icône : - Par défaut : Icône seule, le libellé est caché. - `fr-link--icon-left` : L'icône apparaît à gauche du libellé. - `fr-link--icon-right` : L'icône apparaît à droite du libellé. Dans le cas d'un groupe de boutons, le positionnement de l'icône des boutons peut être généralisé au niveau du groupe avec les classes `fr-links-group--icon-left` ou `fr-links-group--icon-right`. **Exemples de variantes d'icônes** ```HTML Lien avec icône à gauche Lien avec icône à droite Lien icône seule (non recommandé) ``` #### Variante Lien externe L'attribut `target="blank"` amène l'ajout d'une icône "lien externe" à droite du lien. Si une icône à droite était ajoutée, l'icône "lien externe" prend le dessus. #### Variante désactivé Le style désactivé du Lien est appliqué par le retrait de l'attribut `href` sur l'élément ``. Le Lien est alors grisé et les effets au survol et au clic sont retirés. Le pointeur de la souris prend la valeur "not-allowed" au survol du bouton ce qui change sont style. Sur le Lien désactivé, l'attribut `role="link"` et `aria-disabled` seront nécessaires pour les technologies d'assistance. #### Variantes du groupe de lien Le groupe de bouton vient avec de nombreuses variations, telles que : - **Taille des liens** : Des variations de taille sont accessibles au niveau du groupe avec les classes : - `fr-links-group--sm` : Groupe de liens SM - `fr-links-group--lg` : Groupe de liens LG - **Positionnement des icônes des liens** : Les variations de position de l'icône des liens sont accessibles au niveau du groupe avec les classes : - `fr-links-group--icon-left` : Icône des liens à gauche - `fr-links-group--icon-right` : Icône des liens à droite - **Groupe de liens horizontal** : Par défaut, le groupe de bouton positionne les liens les uns en dessous des autres sous forme de liste à puce. Les liens peuvent être placés en ligne par la classe `fr-links-group--inline` (avec passage à la ligne en cas de dépassement du conteneur) **Exemple de groupe de lien** ```HTML

``` --- ### JavaScript Le composant Lien **ne nécessite pas l'utilisation de JavaScript** pour son fonctionnement de base. Une fonctionnalité disponible dans le core, permet de remplir automatiquement le détail des **liens de téléchargement**. Pour instancier le javascript de remplissage automatique du détail sur le lien de téléchargement, ajouter l'attribut `data-fr-assess-file` sur le lien. Les propriétés de type, poids, et langue sont récupérées depuis le fichier. Le texte de détail est automatiquement remplacé au chargement du JS. Il est conseillé de tout de même remplir les infos connues dans le détail en solution de repli. Si la page est en Anglais, l'attribut `data-fr-assess-file` doit prendre la valeur "bytes", pour afficher le poids en Bytes plutôt qu'en Octet. Pour fonctionner le fichier à télécharger doit être sur le même cross-domain que le site. **Exemple des details du lien de téléchargement automatiques** ```HTML Télécharger le document lorem ipsum CE TEXTE EST REMPlACÉ ``` #### Installation du Javascript Pour fonctionner, le **remplissage automatique du détail des liens de téléchargement** nécessite l'utilisation de JavaScript. Cette fonctionnalité est disponible dans le core. Il est donc nécessaire d'importer les fichiers js du core à la fin de la page (avant ``) : ```HTML ``` NB: Il est aussi possible d'importer le Js global du DSFR `dsfr.module.min.js` Pour fonctionner sur Internet Explorer 11, un fichier legacy, en version nomodule ES5, peut aussi être importé : ```HTML ``` #### API > [!NOTE] > L'activation ou la désactivation de la fonction de remplissage automatique du détail des liens de téléchargement (assess-file) n'est pas disponible via l'API JS, elle se fait via l'ajout ou le retrait de l'attribut `data-fr-assess-file` sur le lien. --- ### Note de version [Voir les évolutions sur github](https://github.com/GouvernementFR/dsfr/pulls?q=is%3Apr+is%3Aclosed+is%3Amerged+link+) ::dsfr-doc-changelog