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.