Vertical Spacing

The vertical spacing component creates vertical margins between successive child elements of the element it is applied to.

Variants

Vertical Spacing vertical-spacing-{sm, md, lg}

A basic stack

  • 

    <div class="vertical-spacing-sm">
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="vertical-spacing-md">
  <span></span>
  <span></span>
  <span></span>
</div>

<div class="vertical-spacing-lg">
  <span></span>
  <span></span>
  <span></span>
</div>

Usage

Class Name Description
vertical-spacing-sm

creates small vertical spacing between child elements using margin-top
vertical-spacing-md

creates medium vertical spacing between child elements using margin-top
vertical-spacing-lg

creates large vertical spacing between child elements using margin-top