Elevation

Elevation communicates hierarchy through shadow, not just stacking order. Each level is a CSS variable (--shadow-elevation-*) and a matching utility class (elevation-*) — wireframe theme sets every level to none, since it's flat by design.

Elevation

The shadow applied at each level, and where it's used.

Elevation LevelUsage
16 dp
  • Modal dialogs
  • Modal drawers
08 dp
  • Table detail panel
  • Menus
  • Interactive cards (picked up)
02 / 04 dp
  • Interactive cards (at rest)
00 dp
  • Page background
  • Section containers
  • Tables
  • Input fields
  • Rules
  • Banners

This elevation level has no drop shadows.

Elevation Surfaces

Various types of content and how they relate to one another in an elevation hierarchy.

4Modal Overlays & Drawers
3Detail Panel
2Interactive Cards
1Base, Section Containers, and Tables
  1. 4

    Modal Overlays & Drawers

    16 dp

    Modals appear in front of all other content and prevent the user from completing any actions in the application until dismissed.

  2. 3

    Detail Panel

    08 dp

    The panel becomes present when clicking on a link, such as an alert or event, and appears in front of surfaces including section containers, tables, and interactive cards.

  3. 2

    Interactive Cards

    02 / 04 dp

    Interactive cards are draggable and modular, allowing the user to manipulate and customize how they view content. These primarily exist within Dashboards and Orchestration. Drop shadows are used with interactive cards to emphasize their tactility.

  4. 1

    Base, Section Containers, and Tables

    00 dp

    The background represents the base on which section containers, interactive cards, and other content rest upon. Section containers are static shapes that hold content, therefore have no elevation shadows. Tables are positioned to be fixed within section containers and also have no elevation shadows.