Box

Bordered box


<div class="border p-4">
  <p class="font-large">Bordered box</p>
</div>

Box Backdrop


<div class="box-backdrop p-4">
  <p class="font-large">Box Backdrop</p>
</div>

Border radius - 0.4em

Border radius - 1.0em


<div class="bg-gray p-4 border-radius">
  <p class="font-large">Border radius</p>
</div>
<div class="bg-gray p-4 border-radius-1">
  <p class="font-large">Border radius</p>
</div>

Box shadow

Box shadow on hover


<div class="box-shadow p-4">
  <p class="font-large">Box shadow</p>
</div>
<div class="hover-shadow p-4">
  <p class="font-large">Box shadow on hover</p>
</div>

Float on hover

Scale on hover

Shrink on hover


<div class="hover-float bg-gray p-4">
  <p class="font-large">Float on hover</p>
</div>
<div class="hover-scale bg-gray p-4">
  <p class="font-large">Scale on hover</p>
</div>
<div class="hover-shrink bg-gray p-4">
  <p class="font-large">Shrink on hover</p>
</div>