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 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 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>
<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
<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
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- 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
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- 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.
- United States
- Alabama
- Alaska
- Arizona
- Arkansas
- California
- Colorado
- Connecticut
- Delaware
- Florida
- Georgia
- Hawaii
- Idaho
- Illinois
- Indiana
- Iowa
- Kansas
- Kentucky
- Louisiana
- Maine
- Maryland
- Massachusetts
- Michigan
- Minnesota
- Mississippi
- Missouri
- Montana
- Nebraska
- Nevada
- New Hampshire
- New Jersey
- New Mexico
- New York
- North Carolina
- North Dakota
- Ohio
- Oklahoma
- Oregon
- Pennsylvania
- Rhode Island
- South Carolina
- South Dakota
- Tennessee
- Texas
- Utah
- Vermont
- Virginia
- Washington
- Washington DC
- West Virginia
<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>