Feuille
Quand l'utiliser
Le composant 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 boîte de dialogue 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 composants infobulles et notes. Au format bureau, la feuille est utilisée lorsqu'il y a trop de contenu à afficher dans ces composants.
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 tout autre composant.
La hauteur maximale du composant 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 le composant, 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 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 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 48 px tandis que ceux du haut et du bas sont de 32 px.
Dans le format mobile, l’espacement intérieur entre le contenu et le bord du composant est de 16 px 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;
CSS de la feuille
background-color: #ffffff;
border: 1px solid #c5cad2;
box-shadow: 0px 2px 8px rgb(34, 54, 84, 0.24);
Dernière mise à jour : 6 novembre 2023