Usage
Below, we are using different levels of elevation in two different ways. All our components that have elevation also have the Elevation property where the elevation level (shadow) can be set.
The same elevation types can be used with our predefined CSS classes.
Note: Elevation is disabled when a component supports and uses the Outlined property.
0
1
4
4
0
1
4
<MudPaper Elevation="0" Class="py-8 px-10">0</MudPaper> <MudPaper Elevation="1" Class="py-8 px-10">1</MudPaper> <MudPaper Elevation="4" Class="py-8 px-10">4</MudPaper> <MudPaper Elevation="4" Outlined="true" Class="py-8 px-10">4</MudPaper> <div class="mud-elevation-0 py-8 px-10 rounded white">0</div> <div class="mud-elevation-1 py-8 px-10 rounded white">1</div> <div class="mud-elevation-4 py-8 px-10 rounded white">4</div>
Elevation Levels
Every component that has the Elevation property takes values in the range of 0 - 25, or you can access them with the CSS classes displayed below.
.mud-elevation-0
.mud-elevation-1
.mud-elevation-2
.mud-elevation-3
.mud-elevation-4
.mud-elevation-5
.mud-elevation-6
.mud-elevation-7
.mud-elevation-8
.mud-elevation-9
.mud-elevation-10
.mud-elevation-11
.mud-elevation-12
.mud-elevation-13
.mud-elevation-14
.mud-elevation-15
.mud-elevation-16
.mud-elevation-17
.mud-elevation-18
.mud-elevation-19
.mud-elevation-20
.mud-elevation-21
.mud-elevation-22
.mud-elevation-23
.mud-elevation-24
.mud-elevation-25
<MudPaper Elevation="0" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-0</MudPaper> <MudPaper Elevation="1" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-1</MudPaper> <MudPaper Elevation="2" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-2</MudPaper> <MudPaper Elevation="3" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-3</MudPaper> <MudPaper Elevation="4" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-4</MudPaper> <MudPaper Elevation="5" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-5</MudPaper> <MudPaper Elevation="6" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-6</MudPaper> <MudPaper Elevation="7" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-7</MudPaper> <MudPaper Elevation="8" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-8</MudPaper> <MudPaper Elevation="9" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-9</MudPaper> <MudPaper Elevation="10" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-10</MudPaper> <MudPaper Elevation="11" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-11</MudPaper> <MudPaper Elevation="12" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-12</MudPaper> <MudPaper Elevation="13" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-13</MudPaper> <MudPaper Elevation="14" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-14</MudPaper> <MudPaper Elevation="15" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-15</MudPaper> <MudPaper Elevation="16" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-16</MudPaper> <MudPaper Elevation="17" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-17</MudPaper> <MudPaper Elevation="18" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-18</MudPaper> <MudPaper Elevation="19" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-19</MudPaper> <MudPaper Elevation="20" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-20</MudPaper> <MudPaper Elevation="21" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-21</MudPaper> <MudPaper Elevation="22" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-22</MudPaper> <MudPaper Elevation="23" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-23</MudPaper> <MudPaper Elevation="24" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-24</MudPaper> <MudPaper Elevation="25" Height="84px" Width="150px" Class="d-flex align-center justify-center ma-4">.mud-elevation-25</MudPaper>