Feuille
Quand l'utiliser
La composante Feuille permet d'afficher du contenu secondaire non essentiel à la tâche, tout en permettant à l’utilisateur de consulter le contenu important de la page. La feuille est moins intrusive qu’une fenêtre modale, mais permet tout de même de mettre en avant la consultation d’informations.
La feuille est utilisée autant au format mobile qu’au format bureau. Au format mobile, elle s’affiche par défaut lorsque l'utilisateur interagit avec les composantes infobulles et notes. Au format bureau, la feuille est utilisée lorsqu'il y a trop de contenu à afficher dans ces composantes.
Comment l'utiliser
La feuille apparaît seulement lorsqu’une action a été réalisée au préalable. Par exemple, appuyer sur l'icône de l’infobulle. Elle ne s’affiche pas automatiquement au survol.
La feuille contient uniquement un titre, du texte (incluant des liens hypertextes) et une icône de fermeture «x». En aucun cas, elle ne peut contenir des boutons, des images, ou toutes autres composantes.
La hauteur maximale de la composante correspond au tiers de la fenêtre de navigation, autant au format bureau que mobile.
Le contenu de la feuille devrait être court et clair. Dans certains cas, une barre de défilement peut être ajoutée si le contenu dépasse la hauteur maximale autorisée. Lorsque le curseur est situé dans la composante, le défilement va se faire dans celle-ci alors que si le curseur est situé à l’extérieur, le défilement va se faire dans la page.
Lorsque la feuille est affichée, le contenu de la page sous celle-ci doit rester clair et disponible à l’utilisateur. Aucun grisé, flou ou tout autre effet visuel ne doit être appliqué sur la page de contenu.
À ne pas faire
Informations techniques
Dimensions
La hauteur de la feuille s’adapte au contenu jusqu'à un maximum d’un tiers de l’écran de la fenêtre de navigation. La feuille est fixe au bas de l’écran.
Au format bureau, la composante de la feuille prend la pleine largeur de l’écran et sa hauteur s’adapte au contenu jusqu’à un maximum d’un tiers de la fenêtre de navigation.
Au format mobile, la composante Feuille est superposée à la page de contenu. Elle prend toute la largeur.
Espacements
Dans le format bureau, les espacements de gauche et de droite sont d’un minimum de 48px tandis que ceux du haut et du bas sont de 32px.
Dans le format mobile, l’espacement intérieur entre le contenu et le bord de la composante est de 16px de tous les côtés.
CSS du titre
font-family: Open Sans
font-weight: bold
font-size: 16px
color: #223654
CSS du contenu
font-family: Open Sans
font-weight: regular
font-size: 16px
color: #223654
Dernière mise à jour : 3 mars 2023