Elevation
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.
Types
In the Appwrite console we use two types of elevation:
Variable | Type | |
---|---|---|
shadow-small
|
Small | Used to show contrast between layout elements, such as cards or tables, and their parent component. |
shadow-large
|
Large | Used to show contrast between ‘floating’ components, such as popovers, alerts or modals, and the components below. |
shadow-small
shadow-large
<div class="card" style="box-shadow:var(--shadow-small);">
<p class="text u-margin-block-start-8">shadow-small</p>
</div>
<div class="card" style="box-shadow:var(--shadow-large);">
<p class="text u-margin-block-start-8">shadow-large</p>
</div>
Best Practice
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).
Do
To create contrast between a floating surface and the surface beneath, use shadow-large.
Don't
Do not make floating elements look flat by not using shadows.