Système d'ombres et d'élévation

L'élévation représente la superposition d’un élément par rapport à autre sur un axe Z.

Au sein du DSFR, l'élévation est notamment matérialise par une ombre placée sur les éléments mis en avant (élevés) , ainsi que par une couleur de fond, plus claire, en mode sombre.

On distingue 4 niveaux ou étages différents sur l’ensemble des composants du DSFR :

• Base (default) : le niveau par défaut, sans manifestation visuelle.
• Surélevé (raised) : niveau le plus bas, les éléments concernés sont mis en avant par rapport à la base mais existent dans le même contexte et ne se superposent pas (peut notamment servir à souligner une interaction).
• Superposé (overlap) : les éléments concernés passent par-dessus les niveaux précédents (par exemple, lors d’un défilement ou l’ouverture d’un menu) ; pour autant, les niveaux précédents ne sont pas ignorés et partiellement visibles. En code, on trouve $overlap-over et $overlap-above pour gérer les cas où des éléments $overlap sont affichés en même temps sur l’écran (exemple : bandeau consent et menu déroulant).
• Détaché (lifted) : les éléments concernés passent par-dessus les niveaux précédents, et ces derniers sont retirés du champ d’attention de l’utilisateur (par exemple via l’utilisation d’une surcouche assombrissante).