Back to Shoelace

Elevation Tokens

docs/pages/tokens/elevation.md

2.20.1974 B
Original Source

Elevation Tokens

Elevation tokens are used to give elements the appearance of being raised off the page. Use them with the box-shadow property. These are especially useful for menus, popovers, and dialogs.

TokenExample
--sl-shadow-x-small<div class="elevation-demo" style="box-shadow: var(--sl-shadow-x-small);"></div>
--sl-shadow-small<div class="elevation-demo" style="box-shadow: var(--sl-shadow-small);"></div>
--sl-shadow-medium<div class="elevation-demo" style="box-shadow: var(--sl-shadow-medium);"></div>
--sl-shadow-large<div class="elevation-demo" style="box-shadow: var(--sl-shadow-large);"></div>
--sl-shadow-x-large<div class="elevation-demo" style="box-shadow: var(--sl-shadow-x-large);"></div>