Home
Elevation
- Elevation adds a shadow effect to an element to give it depth.
- It can be used to create a sense of hierarchy or to draw attention to a particular element.
Usage
<div class="elevated-element">
<wc-elevation style="--elevation-level: 1"></wc-elevation>
Level 1
</div>
<div class="elevated-element">
<wc-elevation style="--elevation-level: 2"></wc-elevation>
Level 2
</div>
<div class="elevated-element">
<wc-elevation style="--elevation-level: 3"></wc-elevation>
Level 3
</div>
<div class="elevated-element">
<wc-elevation style="--elevation-level: 4"></wc-elevation>
Level 4
</div>
<div class="elevated-element">
<wc-elevation style="--elevation-level: 5"></wc-elevation>
Level 5
</div>
<style>
.elevated-element {
position: relative;
border-radius: var(--shape-corner-extra-small);
padding: var(--spacing-200);
}
</style>
On this page
Usage