Box


Bordered box


<div class="border-all padding-30">
  <p class="font-large">Bordered box</p>
</div>

Border radius - 0.25em

Border radius - 0.375em

Border radius - 0.5em

Border radius - 1.0em

Border radius - 1.5em

Border radius - 2.0em

Border radius - 2.5em

Border radius - 3.0em


<div class="bg-grey padding-30 border-radius-025">
  <p class="font-large">Border radius</p>
</div>
<div class="bg-grey padding-30 border-radius-0375">
  <p class="font-large">Border radius</p>
</div>
<div class="bg-grey padding-30 border-radius-05">
  <p class="font-large">Border radius</p>
</div>
<div class="bg-grey padding-30 border-radius-10">
  <p class="font-large">Border radius</p>
</div>
<div class="bg-grey padding-30 border-radius-15">
  <p class="font-large">Border radius</p>
</div>
<div class="bg-grey padding-30 border-radius-20">
  <p class="font-large">Border radius</p>
</div>
<div class="bg-grey padding-30 border-radius-25">
  <p class="font-large">Border radius</p>
</div>
<div class="bg-grey padding-30 border-radius-30">
  <p class="font-large">Border radius</p>
</div>

Box shadow

Box shadow with hover

Box shadow on hover


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

Float on hover

Scale on hover

Shrink on hover


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