vspace

Description

Returns one of the predefined vertical spacing units which should be used on the vertical margins of components.

Parameters

$size: tshirt size  // as defined in `init/config.scss`

Sass Usage

margin-bottom: vspace(x-small);
padding-bottom: vspace(medium);

Usage

Usage example

vspace(x-small)
vspace(small)
vspace(medium)
vspace(large)
vspace(x-large)
vspace(2x-large)
vspace(3x-large)

Code example

<div class="vspace-example">
  <div class="vspace-example__item">
    <div class="vspace--x-small"></div>
    <code class="vspace-example__code">vspace(x-small)</code>
  </div>
  <div class="vspace-example__item">
    <div class="vspace--small"></div>
    <code class="vspace-example__code">vspace(small)</code>
  </div>
  <div class="vspace-example__item">
    <div class="vspace--medium"></div>
    <code class="vspace-example__code">vspace(medium)</code>
  </div>
  <div class="vspace-example__item">
    <div class="vspace--large"></div>
    <code class="vspace-example__code">vspace(large)</code>
  </div>
  <div class="vspace-example__item">
    <div class="vspace--x-large"></div>
    <code class="vspace-example__code">vspace(x-large)</code>
  </div>
  <div class="vspace-example__item">
    <div class="vspace--2x-large"></div>
    <code class="vspace-example__code">vspace(2x-large)</code>
  </div>
  <div class="vspace-example__item">
    <div class="vspace--3x-large"></div>
    <code class="vspace-example__code">vspace(3x-large)</code>
  </div>
</div>