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>
<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>
<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>
<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 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>
<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>
<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>
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>
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>
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 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 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. 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. 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. 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 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 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>
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>
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>
<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>
<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>
<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>
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>
<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>
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 }
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>
Vertical alignment modifiers change the alignment of the media and body content.
.media { --align-middle | --align-bottom }
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>
The reversed modifier changes the order of image and content from image on left to image on right.
.media { --reverse }
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 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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>
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>