Elevate Content

Adding shadows is as simple as adding .pacem-rise css class to a DOM element:

<!-- example -->
<div class="pacem-rise">default rise</div>
<!-- default elevation includes borders, but you can remove them -->
<div class="pacem-rise rise-noborder">default rise but without borders</div>

Elevation level gets tweaked by adding further - more specific - css classes:

<div class="pacem-rise rise--2">default rise</div>

rise-specific css classes have currently suffixes in a range from 1 to 5:
rise--1, rise--2, ... , rise--5.

Interactivity

Elevation might be triggered depending on mouse interaction or element focus:

<!-- example -->
<div class="pacem-rise rise-none rise-hover--2">from flat to elevation "2"</div>