Icon
Une icône est composée d'un élément graphique (balise <i> avec une classe CSS pour le choix de l'icone) et d'espace vide autour de celui-ci (balise <span> agissant comme un container, avec différentes facettes pour le style ou la taille).
Tailles
- • 4 tailles sont disponibles pour vos icônes : petite (
is-small), moyenne (is-medium), grande (is-large), très grande (is-huge) - • Ces facettes sont définies sur le container de l'icône (balise
<span>) - • Pour plus d'informations sur les icônes, cliquez ici
Aperçu
Chaque icone doit contenir l'attribut aria-hidden="true". Le raccourci aria-hidden est découragé car certains lecteurs d'écran ne l'interprètent pas correctement.
Les icons devraient pour la plupart être décoratives, et associées à un élément textuel (ex : utiliser des icônes pour illustrer les bullet points d'une liste) ou contenues dans un élément interactif qui porte un texte associé (ex : un bouton, lien ou CTA)
Les icones non décoratives sans texte associé (ex : icône de loupe en guise de bouton recherche) doivent être contenues dans un span ou div ayant l'attribut role="img" et un attribut aria-label portant l'alternative, comme dans le snippet ci-dessus.
Icônes
Chaque classe CSS pour votre balise <i> se trouve ici. Cliquez sur une icône pour copier automatiquement le code HTML nécessaire à son utilisation.
Pictos
Chaque classe CSS pour votre balise <i> se trouve ici. Cliquez sur une icône pour copier automatiquement le code HTML nécessaire à son utilisation.
Spécifiques BTE
Container encerclé
La classe is-circled vous permet de rendre le container d'une icône arrondie. Transparent par défaut, vous pouvez définir le fond du container avec une facette du type has-background-xxx (et la couleur de l'icône avec has-text-xxx-invert)
Aperçu
Container penché
La classe is-stretched vous permet de remplir et de pencher le container de votre icône. A l'inverse de is-circled, la couleur de fond du container est déjà définie par Trilogy.
Aperçu
Icône avec texte
- • Par défaut, l'icône sera alignée verticalement avec le texte.
- • Si vous avez plusieurs lignes de texte, il est alors préférable d'utiliser
.is-alternatepour remonter l'icône face à la première ligne de texte. - • Pour un affichage vertical, utilisez
.is-stacked - • Pour inverser la position du texte et de l'icône, changez simplement l'ordre de votre HTML
Aperçu
Eu ut ad labore sint elit enim et magna culpa deserunt ea adipisicing. Sint esse labore ullamco ullamco qui elit duis amet sint officia non. Lorem incididunt ex exercitation commodo. Incididunt exercitation dolor aute eu dolor irure ullamco officia officia cillum nulla nostrud nulla. Dolore voluptate fugiat laboris ex excepteur fugiat nulla. Incididunt veniam incididunt adipisicing Lorem laborum. Pariatur et qui nulla qui adipisicing quis esse anim excepteur.
Lorem Ipsum
Statut
- • Ajoutez une notification à une icône existante, en ajoutant la classe
has-status - • Pour remplacer cette notification par une seconde icône dite « de statut », insérez simplement son code HTML au sein de la première icône.
- • Vous devrez alors définir le parent (classe
is-ancestor) et l'enfant (classeis-descendant) - • L'icône de statut se positionne en haut à droite par défaut et peut se déplacer en bas à droite avec la classe
is-bottom
Aperçu