Structures

Box

Boxes off content with padding and relative positioning.

Modifiers:

.box { --flush | --xxs |--xs | --sm | --lg | --xl }

Used in conjunction with +bg-* color classes.

Use +clearfix utility class to clear any floated content inside.

Boxed off content.

<div class="box +bg-red-light">
	<p class="+fg-white">
		Boxed off content.
	</p>
</div>

Editorial

Editorial Layout

<div class="editorial">
	<div class="editorial__social">
		<div style="background-color: blue; height: 150px; opacity: 0.25;"></div>
	</div>

	<main class="editorial__content">
		<div style="background-color: red; height: 150px; opacity: 0.25;"></div>
	</main>

	<aside class="editorial__advertisement">
		<div style="background-color: green; height: 150px; opacity: 0.25;"></div>
	</aside>
</div>

Editorial Layout With Top Content Plus Social

<div class="editorial">
	<div class="editorial__content-plus-social" style="background-color: orange; height: 150px; opacity: 0.25;">
		<div class="editorial__social --clear-default"></div>
		<main class="editorial__content --clear-default"></main>
	</div>

	<aside class="editorial__advertisement">
		<div style="background-color: green; height: 150px; opacity: 0.25;"></div>
	</aside>
</div>

Editorial Layout With Headline Byline

<div class="editorial">
	<div class="editorial__headline-byline">
		<div style="background-color: yellow; height: 150px; opacity: 0.25;"></div>
	</div>

	<div class="editorial__social">
		<div style="background-color: blue; height: 150px; opacity: 0.25;"></div>
	</div>

	<main class="editorial__content">
		<div style="background-color: red; height: 150px; opacity: 0.25;"></div>
	</main>

	<aside class="editorial__advertisement">
		<div style="background-color: green; height: 150px; opacity: 0.25;"></div>
	</aside>
</div>

Form

Form



Form element helper text.
Form element helper text.
<form class="form-input-container">
	<label class="form-label" for="textInput">Text input</label>
	<div class="form-control">
		<input class="form-input" placeholder="Input text here..." type="text" id="textInput" />
	</div>

	<br />

	<label class="form-label" for="textInput">Small text input</label>
	<div class="form-control">
		<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" />
	</div>

	<br />

	<div class="form-element-container">
		<label class="form-label" for="textInput">Text input with helper text</label>
		<div class="form-control">
			<input class="form-input" placeholder="Input text here..." type="text" id="textInput" />
		</div>
		<span class="form-element-help">Form element helper text.</span>
	</div>

	<div class="form-element-container">
		<label class="form-label" for="textInput">Small text input with helper text</label>
		<div class="form-control">
			<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" />
		</div>
		<span class="form-element-help">Form element helper text.</span>
	</div>
</form>

Inline Form



Form element helper text.
Form element helper text.
<form class="form-input-container form-inline">
	<label class="form-label" for="textInput">Text input</label>
	<div class="form-control">
		<input class="form-input" placeholder="Input text here..." type="text" id="textInput" />
	</div>

	<br />

	<label class="form-label" for="textInput">Small text input</label>
	<div class="form-control">
		<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" />
	</div>

	<br />

	<div class="form-element-container">
		<label class="form-label" for="textInput">Text input with helper text</label>
		<div class="form-control">
			<input class="form-input" placeholder="Input text here..." type="text" id="textInput" />
		</div>
		<span class="form-element-help">Form element helper text.</span>
	</div>

	<div class="form-element-container">
		<label class="form-label" for="textInput">Small text input with helper text</label>
		<div class="form-control">
			<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" />
		</div>
		<span class="form-element-help">Form element helper text.</span>
	</div>
</form>

Form List



  • Form element helper text.
    Form element helper text.
  • arrow-icon
<form>
	<ul class="form-list">
		<li class="form-input-container">
			<label class="form-label" for="textInput">Text input</label>
			<div class="form-control">
				<input class="form-input" placeholder="Input text here..." type="text" id="textInput" />
			</div>

			<br />

			<label class="form-label" for="textInput">Small text input</label>
			<div class="form-control">
				<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" />
			</div>

			<br />

			<div class="form-element-container">
				<label class="form-label" for="textInput">Text input with helper text</label>
				<div class="form-control">
					<input class="form-input" placeholder="Input text here..." type="text" id="textInput" />
				</div>
				<span class="form-element-help">Form element helper text.</span>
			</div>

			<div class="form-element-container">
				<label class="form-label" for="textInput">Small text input with helper text</label>
				<div class="form-control">
					<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" />
				</div>
				<span class="form-element-help">Form element helper text.</span>
			</div>
		</li>
		<li class="form-input-container">
			<label class="form-label" for="textInput">Text input</label>
			<div class="form-control">
				<textarea class="form-input" name="" id=""></textarea>
			</div>
		</li>
		<li class="form-input-container">
			<label class="form-label">This is a select dropdown</label>
			<div class="form-control --with-right-icon">
				<select class="form-select">
					<option>12 month</option>
					<option>18 month</option>
					<option>24 month</option>
					<option>36 month</option>
				</select>
				<span class="form-select__arrow icon --xs +fill-blue +pos-absolute">
					<svg class="icon__glyph" width="13px" height="13px" viewBox="0 0 13 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
						<title>arrow-icon</title>
						<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
							<g id="Icons" transform="translate(-340.000000, -38.000000)" fill="">
								<g id="dropdown-arrow-inactive" transform="translate(340.000000, 38.000000)">
									<path d="M6.86396103,10.9497475 L6.86396103,0 L5.86396103,0 L5.86396103,10.9497475 L0.707106781,5.79289322 L0,6.5 L6.36396103,12.863961 L6.71751442,12.5104076 L12.7279221,6.5 L12.0208153,5.79289322 L6.86396103,10.9497475 Z" id="Combined-Shape"></path>
								</g>
							</g>
						</g>
					</svg>
				</span>
			</div>
		</li>
	</ul>
</form>

Grid

Grid

Renders grid cells at full-width by default

<div class="grid">
	<div class="grid-cell">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell">
		<div class="box +border"></div>
	</div>
</div>

Grid With Grid Cells

Renders cells grid cells and removes inter-cell white space

<div class="grid">
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
</div>

Grid With Wrapping Cells

Nested grid cells automatically wrap when there isn't enough room for all the cells

<div class="grid">
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
</div>

Grid With Nested Grid

Grid with a nested grid inside a grid cell

<div class="grid">
	<div class="grid-cell">
		<div class="box +border">
			<div class="grid">
				<div class="grid-cell size-1of4">
					<div class="box --bg-white +border"></div>
				</div>
				<div class="grid-cell size-1of4">
					<div class="box --bg-white +border"></div>
				</div>
				<div class="grid-cell size-1of4">
					<div class="box --bg-white +border"></div>
				</div>
				<div class="grid-cell size-1of4">
					<div class="box --bg-white +border"></div>
				</div>
			</div>
		</div>
	</div>
</div>

Grid With Auto Filling Emtpy Cell

Grid with a grid cell with no size. Uses size-fill to take up remaining space.

<div class="grid">
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-fill">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
</div>

Grid With Center Aligned Cells

Grid with center aligned cells. Center aligns cells but not inner content

<div class="grid --align-center">
	<div class="grid-cell size-1of3">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of3">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of2">
		<div class="box +border"></div>
	</div>
</div>

Grid With Bottom Aligned Cells

Grid with bottom aligned cells. Bottom aligns cells but not inner content

<div class="grid --align-bottom">
	<div class="grid-cell size-1of3">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of3">
		<div class="box +border">
			<div class="box +mg-bottom-none"></div>
			<div class="box +mg-bottom-none"></div>
		</div>
	</div>
	<div class="grid-cell size-1of3">
		<div class="box +border"></div>
	</div>
</div>

Grid With Middle Aligned Cells

Grid with middle aligned cells. Middle aligns cells but not inner content

<div class="grid --align-middle">
	<div class="grid-cell size-1of3">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of3">
		<div class="box +border">
			<div class="box +mg-bottom-none"></div>
			<div class="box +mg-bottom-none"></div>
		</div>
	</div>
	<div class="grid-cell size-1of3">
		<div class="box +border"></div>
	</div>
</div>

Grid With Evenly Spaced Cells

Grid with evenly distributed space between cells.

<div class="grid --fit">
	<div class="grid-cell">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell">
		<div class="box +border"></div>
	</div>
</div>

<div class="grid --fit">
	<div class="grid-cell">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell">
		<div class="box +border"></div>
	</div>
</div>

Grid With Equal Height Cells

Grid with equal height grid cells

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum. Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.

<div class="grid --equal-height">
	<div class="grid-cell size-1of3">
		<div class="box size-full +border"></div>
	</div>
	<div class="grid-cell size-1of3">
		<div class="box size-full +border">
			<p>
				Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum mollis
				velit non gravida venenatis. Praesent consequat lectus purus, ut scelerisque
				velit condimentum eu. Maecenas sagittis ante ut turpis varius interdum.
				Quisque tellus ipsum, eleifend non ipsum id, suscipit ultricies neque.
			</p>
		</div>
	</div>
	<div class="grid-cell size-1of3">
		<div class="box size-full +border"></div>
	</div>
</div>

Grid With Centered Grid Cell

Centering a grid cell but not the content within.

<div class="grid">
	<div class="grid-cell size-1of2">
		<div class="box size-full +border"></div>
	</div>
	<div class="grid-cell size-1of2">
		<div class="box size-full +border"></div>
	</div>
	<div class="grid-cell --center size-1of3">
		<div class="box size-full +border"></div>
	</div>
</div>

Grid With Gutter

Renders Grid with gutters in between grid cells.

<div class="grid --with-gutter">
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
	<div class="grid-cell size-1of4">
		<div class="box +border"></div>
	</div>
</div>

Lists

Bare

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
<ol class="list-bare">
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
</ol>

Inline Flex

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
<ol class="list-inline-flex">
	<li class="list-inline-flex__item">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li class="list-inline-flex__item">Aliquam tincidunt mauris eu risus.</li>
	<li class="list-inline-flex__item">Vestibulum auctor dapibus neque.</li>
</ol>

Inline

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. Vestibulum auctor dapibus neque.
<ol class="list-inline">
	<li class="list-inline__item">Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li class="list-inline__item">Aliquam tincidunt mauris eu risus.</li>
	<li class="list-inline__item">Vestibulum auctor dapibus neque.</li>
</ol>

Multi Column

Used to lay out an <ul> or <ol> into multiple columns.
Default is two columns with a 20px column gap.
Column widths based off of page width (1140px) divided by the number of columns and subtracting the column gap.
Columns are self adjusting based on the width of the columns making them responsive.

.multi-column-list

modifiers { --three-column | --four-column | --five-column | --six-column | --mobile-full-width }

The --mobile-full-width creates a single column, full width list from the XS breakpoint and down.

<ul class="multi-column-list --six-column +mg-bottom-none">
	<li><a href="/national-mortgage-rates/" class="text-link --plain">United States</a></li>
	<li><a href="/alabama/mortgage-rates.aspx" class="text-link --plain">Alabama</a></li>
	<li><a href="/alaska/mortgage-rates.aspx" class="text-link --plain">Alaska</a></li>
	<li><a href="/arizona/mortgage-rates.aspx" class="text-link --plain">Arizona</a></li>
	<li><a href="/arkansas/mortgage-rates.aspx" class="text-link --plain">Arkansas</a></li>
	<li><a href="/california/mortgage-rates.aspx" class="text-link --plain">California</a></li>
	<li><a href="/colorado/mortgage-rates.aspx" class="text-link --plain">Colorado</a></li>
	<li><a href="/connecticut/mortgage-rates.aspx" class="text-link --plain">Connecticut</a></li>
	<li><a href="/delaware/mortgage-ra tes.aspx" class="text-link --plain">Delaware</a></li>
	<li><a href="/florida/mortgage-rates.aspx" class="text-link --plain">Florida</a></li>
	<li><a href="/georgia/mortgage-rates.aspx" class="text-link --plain">Georgia</a></li>
	<li><a href="/hawaii/mortgage-rates.aspx" class="text-link --plain">Hawaii</a></li>
	<li><a href="/idaho/mortgage-rates.aspx" class="text-link --plain">Idaho</a></li>
	<li><a href="/illinois/mortgage-rates.aspx" class="text-link --plain">Illinois</a></li>
	<li><a href="/indiana/mortgage-rates.aspx" class="text-link --plain">Indiana</a></li>
	<li><a href="/iowa/mortgage-rates.aspx" class="text-link --plain">Iowa</a></li>
	<li><a href="/kansas/mortgage-rates.aspx" class="text-link --plain">Kansas</a></li>
	<li><a href="/kentucky/mortgage-rates.aspx" class="text-link --plain">Kentucky</a></li>
	<li><a href="/louisiana/mortgage-rates.aspx" class="text-link --plain">Louisiana</a></li>
	<li><a href="/maine/mortgage-rates.aspx" class="text-link --plain">Maine</a></li>
	<li><a href="/maryland/mortgage-rates.aspx" class="text-link --plain">Maryland</a></li>
	<li><a href="/massachusetts/mortgage-rates.aspx" class="text-link --plain">Massachusetts</a></li>
	<li><a href="/michigan/mortgage-rates.aspx" class="text-link --plain">Michigan</a></li>
	<li><a href="/minnesota/mortgage-rates.aspx" class="text-link --plain">Minnesota</a></li>
	<li><a href="/mississippi/mortgage-rates.aspx" class="text-link --plain">Mississippi</a></li>
	<li><a href="/missouri/mortgage-rates.aspx" class="text-link --plain">Missouri</a></li>
	<li><a href="/montana/mortgage-rates.aspx" class="text-link --plain">Montana</a></li>
	<li><a href="/nebraska/mortgage-rates.aspx" class="text-link --plain">Nebraska</a></li>
	<li><a href="/nevada/mortgage-rates.aspx" class="text-link --plain">Nevada</a></li>
	<li><a href="/new-hampshire/mortgage-rates.aspx" class="text-link --plain">New Hampshire</a></li>
	<li><a href="/new-jersey/mortgage-rates.aspx" class="text-link --plain">New Jersey</a></li>
	<li><a href="/new-mexico/mortgage-rates.aspx" class="text-link --plain">New Mexico</a></li>
	<li><a href="/new-york/mortgage-rates.aspx" class="text-link --plain">New York</a></li>
	<li><a href="/north-carolina/mortgage-rates.aspx" class="text-link --plain">North Carolina</a></li>
	<li><a href="/north-dakota/mortgage-rates.aspx" class="text-link --plain">North Dakota</a></li>
	<li><a href="/ohio/mortgage-rates.aspx" class="text-link --plain">Ohio</a></li>
	<li><a href="/oklahoma/mortgage-rates.aspx" class="text-link --plain">Oklahoma</a></li>
	<li><a href="/oregon/mortgage-rates.aspx" class="text-link --plain">Oregon</a></li>
	<li><a href="/pennsylvania/mortgage-rates.aspx" class="text-link --plain">Pennsylvania</a></li>
	<li><a href="/rhode-island/mortgage-rates.aspx" class="text-link --plain">Rhode Island</a></li>
	<li><a href="/south-carolina/mortgage-rates.aspx" class="text-link --plain">South Carolina</a></li>
	<li><a href="/south-dakota/mortgage-rates.aspx" class="text-link --plain">South Dakota</a></li>
	<li><a href="/tennessee/mortgage-rates.aspx" class="text-link --plain">Tennessee</a></li>
	<li><a href="/texas/mortgage-rates.aspx" class="text-link --plain">Texas</a></li>
	<li><a href="/utah/mortgage-rates.aspx" class="text-link --plain">Utah</a></li>
	<li><a href="/vermont/mortgage-rates.aspx" class="text-link --plain">Vermont</a></li>
	<li><a href="/virginia/mortgage-rates.aspx" class="text-link --plain">Virginia</a></li>
	<li><a href="/washington/mortgage-rates.aspx" class="text-link --plain">Washington</a></li>
	<li><a href="/washington-dc/mortgage-rates.aspx" class="text-link --plain">Washington DC</a></li>
	<li><a href="/west-virginia/mortgage-rates.aspx" class="text-link --plain">West Virginia</a></li>
</ul>

Unordered

  • Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  • Aliquam tincidunt mauris eu risus.
  • Vestibulum auctor dapibus neque.
<ul>
	<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	<li>Aliquam tincidunt mauris eu risus.</li>
	<li>Vestibulum auctor dapibus neque.</li>
</ul>

Media

Media Object

The media object is used to place an image or type of media alongside descriptive content.

Gutter modifiers change the size of the margin between the image and content.
.media { --flush | --xxs | --xs | --sm | --md | --lg | --xl }

The mobile-stacked modifier stacks the media image/content above the media body copy.
.media { --mobile-stacked }

Headline copy

Here is some body copy for the media object.

<div class="media">
	<div class="media__figure">
		<img src="https://placehold.it/150x150">
	</div>
	<div class="media__body">
		<h4>Headline copy</h4>
		<p>
			Here is some body copy for the media object.
		</p>
	</div>
</div>

Media Vertical Alignment

Vertical alignment modifiers change the alignment of the media and body content.
.media { --align-middle | --align-bottom }

Headline copy

Here is some body copy for the media object.

<div class="media --align-middle">
	<div class="media__figure">
		<img src="https://placehold.it/150x150">
	</div>
	<div class="media__body">
		<h4>Headline copy</h4>
		<p>
			Here is some body copy for the media object.
		</p>
	</div>
</div>

Media Reversed

The reversed modifier changes the order of image and content from image on left to image on right.
.media { --reverse }

Headline copy

Here is some body copy for the media object.

<div class="media --reverse">
	<div class="media__figure">
		<img src="https://placehold.it/150x150">
	</div>
	<div class="media__body">
		<h4>Headline copy</h4>
		<p>
			Here is some body copy for the media object.
		</p>
	</div>
</div>

Page Wrapper

Page Wrapper

Page wrapper class used for general content well and for centering content in the page. Background color indicates content well not including padding on the outside.

<div class="page-wrapper">
	<div style="background-color: purple; height: 150px; opacity: 0.25;"></div>
</div>

Section

Container used for full page width "sections". Gives a padding top and bottom.

Used as a parent container for adaptive or page-wrapper content containers that need a full-width background color or image.

Modifiers:

section { --xs | --sm | --lg | --xl | --hero }

Used in conjunction with +bg-* color classes.

Content inside of a section container.

<div class="section +bg-gray-light">
	<div class="page-wrapper +bg-white">
		<p class="+mg-bottom-none">
			Content inside of a section container.
		</p>
	</div>
</div>

Tables

Table Bordered

Header one Header two Header three
data one data two data three
data one data two data three
data one data two data three
<div class="table-container">
	<table class="table --bordered --spacing-xs">
		<thead>
			<tr>

				<th>
					Header one
				</th>
				<th>
					Header two
				</th>
				<th>
					Header three
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
		</tbody>
	</table>
</div>

Table Bordered Row

Header one Header two Header three
data one data two data three
data one data two data three
data one data two data three
<div class="table-container">

	<table class="table --bordered-rows --spacing-xs">
		<thead>
			<tr>

				<th>
					Header one
				</th>
				<th>
					Header two
				</th>
				<th>
					Header three
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
		</tbody>
	</table>
</div>

Table Bordered Columns

Header one Header two Header three
data one data two data three
data one data two data three
data one data two data three
<div class="table-container">

	<table class="table --bordered-columns --spacing-xs">
		<thead>
			<tr>

				<th>
					Header one
				</th>
				<th>
					Header two
				</th>
				<th>
					Header three
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
		</tbody>
	</table>
</div>

Table Striped

Header one Header two Header three
data one data two data three
data one data two data three
data one data two data three
<div class="table-container">
	<table class="table --striped">
		<thead>
			<tr>

				<th>
					Header one
				</th>
				<th>
					Header two
				</th>
				<th>
					Header three
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
		</tbody>
	</table>
</div>

Table Bordered Striped

Header one Header two Header three
data one data two data three
data one data two data three
data one data two data three
<div class="table-container">
	<table class="table --striped --bordered">
		<thead>
			<tr>

				<th>
					Header one
				</th>
				<th>
					Header two
				</th>
				<th>
					Header three
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
		</tbody>
	</table>
</div>

Table Extra Extra Small Spacing

Header one Header two Header three
data one data two data three
data one data two data three
data one data two data three
<div class="table-container">
	<table class="table --bordered --spacing-xxs">
		<thead>
			<tr>

				<th>
					Header one
				</th>
				<th>
					Header two
				</th>
				<th>
					Header three
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
		</tbody>
	</table>
</div>

Table Extra Small Spacing

Header one Header two Header three
data one data two data three
data one data two data three
data one data two data three
<div class="table-container">
	<table class="table --bordered --spacing-xs">
		<thead>
			<tr>

				<th>
					Header one
				</th>
				<th>
					Header two
				</th>
				<th>
					Header three
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
		</tbody>
	</table>
</div>

Table Small Spacing

Header one Header two Header three
data one data two data three
data one data two data three
data one data two data three
<div class="table-container">
	<table class="table --bordered --spacing-sm">
		<thead>
			<tr>

				<th>
					Header one
				</th>
				<th>
					Header two
				</th>
				<th>
					Header three
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
		</tbody>
	</table>
</div>

Table Medium Spacing

Header one Header two Header three
data one data two data three
data one data two data three
data one data two data three
<div class="table-container">
	<table class="table --bordered --spacing-md">
		<thead>
			<tr>

				<th>
					Header one
				</th>
				<th>
					Header two
				</th>
				<th>
					Header three
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
		</tbody>
	</table>
</div>

Table Large Spacing

Header one Header two Header three
data one data two data three
data one data two data three
data one data two data three
<div class="table-container">
	<table class="table --bordered --spacing-lg">
		<thead>
			<tr>

				<th>
					Header one
				</th>
				<th>
					Header two
				</th>
				<th>
					Header three
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
		</tbody>
	</table>
</div>

Table Extra Large Spacing

Header one Header two Header three
data one data two data three
data one data two data three
data one data two data three
<div class="table-container">
	<table class="table --bordered --spacing-xl">
		<thead>
			<tr>

				<th>
					Header one
				</th>
				<th>
					Header two
				</th>
				<th>
					Header three
				</th>
			</tr>
		</thead>
		<tbody>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
			<tr>
				<td>
					data one
				</td>
				<td>
					data two
				</td>
				<td>
					data three
				</td>
			</tr>
		</tbody>
	</table>
</div>