Arty - Boxes

Border

Bordered box

Bordered box with 0.4em Border radius

Bordered box with 1.0em Border radius

Bordered box with 2.0em Border radius


<div class="p-4 border">
  <p>Bordered box</p>
</div>
<div class="p-4 border border-radius">
  <p>Bordered box with 0.4em Border radius</p>
</div>
<div class="p-4 border border-radius-1">
  <p>Bordered box with 1.0em Border radius</p>
</div>
<div class="p-4 border border-radius-2">
  <p>Bordered box with 2.0em Border radius</p>
</div>

Box Shadow

Box shadow

Box shadow with hover


<div class="p-4 bg-white box-shadow">
  <p>Bordered box with Box shadow</p>
</div>
<div class="p-4 bg-white box-shadow-with-hover">
  <p>Bordered box with Box shadow</p>
</div>

Hovers

Shadow on Hover

Float on Hover

Scale on Hover

Shrink on Hover


<div class="p-4 border hover-shadow">
  <p>Shadow on Hover</p>
</div>
<div class="p-4 border hover-float">
  <p>Float on Hover</p>
</div>
<div class="p-4 border hover-scale">
  <p>Scale on Hover</p>
</div>
<div class="p-4 border hover-shrink">
  <p>Shrink on Hover</p>
</div>