Elevation

Add the width, height and padding to your elevation card. The following code is pure elevation classes.

surface Lowest
surface Low
surface Container
surface High
surface Highest

Add the width, height and padding to your elevation card. The following code is pure elevation classes.

<!-- surface 1 -->
<div class="bg-surface-100 dark:bg-surfacedark-100 rounded-2xl shadow">surface Lowest</div>

<!-- surface 2 -->
<div class="bg-surface-200 dark:bg-surfacedark-200 rounded-2xl shadow-md">surface Low</div>

<!-- surface 3 -->
<div class="bg-surface-300 dark:bg-surfacedark-300 rounded-2xl shadow-lg">surface Container</div>

<!-- surface 4 -->
<div class="bg-surface-400 dark:bg-surfacedark-400 rounded-2xl shadow-lg">surface High</div>

<!-- surface 5 -->
<div class="bg-surface-500 dark:bg-surfacedark-500 rounded-2xl shadow-xl">surface Highest</div>
Copy