Component documentation

Components

Basics

Components

Objects

Utilities

Basics

Components

Objects

Utilities

Elevation

Elevation is the distance between two surfaces along the z-axis.

Small shadow

#
I am a box with a shadow.
<div class="u-shadow-10">
    <div class="u-padding-vertical-l u-padding-horizontal-l">I am a box with a shadow.</div>
</div>
.u-shadow-10
    .u-padding-vertical-l.u-padding-horizontal-l I am a box with a shadow.

Medium shadow

#
I am a box with a shadow.
<div class="u-shadow-30">
    <div class="u-padding-vertical-l u-padding-horizontal-l">I am a box with a shadow.</div>
</div>
.u-shadow-30
    .u-padding-vertical-l.u-padding-horizontal-l I am a box with a shadow.

Large shadow

#
I am a box with a shadow.
<div class="u-shadow-50">
    <div class="u-padding-vertical-l u-padding-horizontal-l">I am a box with a shadow.</div>
</div>
.u-shadow-50
    .u-padding-vertical-l.u-padding-horizontal-l I am a box with a shadow.