Elevation (Material)

boodoo brings Material Design's elevation system to every component. Elevation controls the relative depth, or distance, between two surfaces along the z-axis.

Elevation classes

Use .elevation-{0|1|2|3|4|5} to layer shadows, or the Tailwind-style .shadow-{sm|base|md|lg|xl|2xl|inner|none} utilities.

<div class="elevation-3">Elevated surface</div>
<div class="shadow-lg">Tailwind-style shadow</div>

Usage guidance

• Low elevation (0–1) for resting cards, list items, and form fields.
• Medium elevation (2–3) for hovered cards, dropdowns, popovers.
• High elevation (4–5) for modals, dialogs, and menus that sit above everything.

Mixins

@import "node_modules/boodoo/scss/mixins";

.fab {
  @include elevation(3);
}

Shadow tokens

The elevation shadows are also exposed as CSS custom properties: --boodoo-shadow-sm|base|md|lg|xl.