mirror of
https://github.com/onsonr/nebula.git
synced 2025-03-10 17:29:11 +00:00
18 lines
1.1 KiB
Markdown
18 lines
1.1 KiB
Markdown
---
|
|
meta:
|
|
title: Elevation
|
|
description: Elevation tokens are used to give elements the appearance of being raised off the page.
|
|
---
|
|
|
|
# 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.
|
|
|
|
| Token | Example |
|
|
| --------------------- | -------------------------------------------------------------------------------- |
|
|
| `--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> |
|