Elevation is the relative distance between two surfaces along the z-axis. Shadows and blurs create a layered effect that visually indicates that an object is "elevated" in priority or hierarchy.
In the Appwrite console we use two types of elevation:
||Small||Used to show contrast between layout elements, such as cards or tables, and their parent component.|
||Large||Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below.|
Small shadows should be used with standard layout components (e.g. cards, tables).
We recommend the use of a large drop-shadow for floating components (e.g. popovers, alerts, modals).
To create contrast between a floating surface and the surface beneath, use shadow-large.
Do not make floating elements look flat by not using shadows.