Elevation and shadows usage
Each element has it's own elevation and shadow. The elevation and shadows are described here.
Shadow / elevation
| Elevation | Example |
|---|---|
| 24 |
<div class="z24 square blue"></div>
<div class="z24--inset square blue"></div>
|
| 16 |
<div class="z16 square blue"></div>
<div class="z16--inset square blue"></div>
|
| 12 |
<div class="z12 square blue"></div>
<div class="z12--inset square blue"></div>
|
| 9 |
<div class="z9 square blue"></div>
<div class="z9--inset square blue"></div>
|
| 8 |
<div class="z8 square blue"></div>
<div class="z8--inset square blue"></div>
|
| 6 |
<div class="z6 square blue"></div>
<div class="z6--inset square blue"></div>
|
| 4 |
<div class="z4 square blue"></div>
<div class="z4--inset square blue"></div>
|
| 3 |
<div class="z3 square blue"></div>
<div class="z3--inset square blue"></div>
|
| 2 |
<div class="z2 square blue"></div>
<div class="z2--inset square blue"></div>
|
| 1 |
<div class="z1 square blue"></div>
<div class="z1--inset square blue"></div>
|
| 0 removes shadow |
<div class="z1 z0 square blue"></div>
|