The elevation is the relative distance between two elements along the z-axis. Any object in real-world cast a shadow when elevated, and the shadow has specific properties and appearance based on the elevation degree. At Wonderflow, we want to provide a similar experience by introducing different elevation degrees and systematic shadows based on predefined layers of elevation.
Our elevation system is made by four layers, in which elements can be placed in order to provide depth and cast shadows.
Consider this layer as the "plane" on which elements are placed by default if not declaring any elevation value. Here is some example of elements usually placed on this layer:
Document rootDocument bodyBackgroundsAny element that is not elevated
This is the first level of elevation from Z0, elements placed here cast a small and hard shadow. Here some elements that can be placed on this level:
Cards and wrappersText fields and selectsSelection controlsButtons
The second layer of elevation can hold elements like:
The third layer can contain fixed elements like:
Elements that can be placed on this elevation layer are those that are always palced above everything else.
Modal dialogsModal drawersGlobal notifications
Some UI elements are placed by default on a specific layer because they must be always placed on that layer, indipendently from the context and the design. For example, a
Dropdown element is always placed on the layer 2 and so it will cast always the same shadow across the experiences.
Here you can find the full list of the elements that have a predefined elevetaion value: