<div class="grid --with-gutter +mg-top">
<div class="grid-cell size-1of2">
<ul class="list-bare accordion">
<li class="accordion__item">
<div class="heading-tertiary accordion__title-container">
<button class="button --bare --full-width">
<span class="media --flush --align-middle --reverse">
<span class="media__figure accordion__icon icon --xs">
<svg class="icon__glyph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="-1 -2 8 8" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
<h6 class="media__body accordion__title +mg-bottom-none">
Purchase/Refinance
</h6>
</span>
</button>
</div>
<div class="accordion__content" style="display: none;">
<p class="+text-size-sm">
Click "Purchase" if you are buying a home. Click "Refinance" if you own a home and you want to replace your mortgage with
another loan at a different rate and terms.
</p>
</div>
</li>
<li class="accordion__item">
<div class="heading-tertiary accordion__title-container">
<button class="button --bare --full-width">
<span class="media --flush --align-middle --reverse">
<span class="media__figure accordion__icon icon --xs">
<svg class="icon__glyph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="-1 -2 8 8" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
<h6 class="media__body accordion__title +mg-bottom-none">
Purchase/Refinance
</h6>
</span>
</button>
</div>
<div class="accordion__content" style="display: none;">
<p class="+text-size-sm">
Click "Purchase" if you are buying a home. Click "Refinance" if you own a home and you want to replace your mortgage with
another loan at a different rate and terms.
</p>
</div>
</li>
</ul>
</div>
<div class="grid-cell size-1of2">
<ul class="list-bare accordion">
<li class="accordion__item">
<div class="heading-tertiary accordion__title-container">
<button class="button --bare --full-width">
<span class="media --flush --align-middle --reverse">
<span class="media__figure accordion__icon icon --xs">
<svg class="icon__glyph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="-1 -2 8 8" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
<h6 class="media__body accordion__title +mg-bottom-none">
Purchase/Refinance
</h6>
</span>
</button>
</div>
<div class="accordion__content" style="display: none;">
<p class="+text-size-sm">
Click "Purchase" if you are buying a home. Click "Refinance" if you own a home and you want to replace your mortgage with
another loan at a different rate and terms.
</p>
</div>
</li>
<li class="accordion__item">
<div class="heading-tertiary accordion__title-container">
<button class="button --bare --full-width">
<span class="media --flush --align-middle --reverse">
<span class="media__figure accordion__icon icon --xs">
<svg class="icon__glyph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="-1 -2 8 8" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
<h6 class="media__body accordion__title +mg-bottom-none">
Purchase/Refinance
</h6>
</span>
</button>
</div>
<div class="accordion__content" style="display: none;">
<p class="+text-size-sm">
Click "Purchase" if you are buying a home. Click "Refinance" if you own a home and you want to replace your mortgage with
another loan at a different rate and terms.
</p>
</div>
</li>
</ul>
</div>
</div>
<div class="grid --with-gutter +mg-top">
<div class="grid-cell size-1of2">
<ul class="list-bare accordion">
<li class="accordion__item">
<div class="heading-tertiary accordion__title-container --is-active">
<button class="button --bare --full-width">
<span class="media --flush --align-middle --reverse">
<span class="media__figure accordion__icon icon --xs">
<svg class="icon__glyph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="-1 -2 8 8" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
<h6 class="media__body accordion__title +mg-bottom-none">
Purchase/Refinance
</h6>
</span>
</button>
</div>
<div class="accordion__content">
<p class="+text-size-sm">
Click "Purchase" if you are buying a home. Click "Refinance" if you own a home and you want to replace your mortgage with
another loan at a different rate and terms.
</p>
</div>
</li>
<li class="accordion__item">
<div class="heading-tertiary accordion__title-container">
<button class="button --bare --full-width">
<span class="media --flush --align-middle --reverse">
<span class="media__figure accordion__icon icon --xs">
<svg class="icon__glyph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="-1 -2 8 8" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
<h6 class="media__body accordion__title +mg-bottom-none">
Purchase/Refinance
</h6>
</span>
</button>
</div>
<div class="accordion__content" style="display: none;">
<p class="+text-size-sm">
Click "Purchase" if you are buying a home. Click "Refinance" if you own a home and you want to replace your mortgage with
another loan at a different rate and terms.
</p>
</div>
</li>
</ul>
</div>
<div class="grid-cell size-1of2">
<ul class="list-bare accordion">
<li class="accordion__item">
<div class="heading-tertiary accordion__title-container">
<button class="button --bare --full-width">
<span class="media --flush --align-middle --reverse">
<span class="media__figure accordion__icon icon --xs">
<svg class="icon__glyph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="-1 -2 8 8" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
<h6 class="media__body accordion__title +mg-bottom-none">
Purchase/Refinance
</h6>
</span>
</button>
</div>
<div class="accordion__content" style="display: none;">
<p class="+text-size-sm">
Click "Purchase" if you are buying a home. Click "Refinance" if you own a home and you want to replace your mortgage with
another loan at a different rate and terms.
</p>
</div>
</li>
<li class="accordion__item">
<div class="heading-tertiary accordion__title-container">
<button class="button --bare --full-width">
<span class="media --flush --align-middle --reverse">
<span class="media__figure accordion__icon icon --xs">
<svg class="icon__glyph" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="18px" height="18px" viewBox="-1 -2 8 8" version="1.1">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
<h6 class="media__body accordion__title +mg-bottom-none">
Purchase/Refinance
</h6>
</span>
</button>
</div>
<div class="accordion__content" style="display: none;">
<p class="+text-size-sm">
Click "Purchase" if you are buying a home. Click "Refinance" if you own a home and you want to replace your mortgage with
another loan at a different rate and terms.
</p>
</div>
</li>
</ul>
</div>
</div>
Indicate the current page's location within a navigational hierarchy that automatically adds separators via CSS.
Separators are automatically added in CSS through ::before
and content
.
<ol class="breadcrumb +mg-bottom-xs" aria-label="Breadcrumb">
<li class="breadcrumb__item-container">
<a class="breadcrumb__item" href="">Credit Cards</a>
</li>
<li class="breadcrumb__item-container">
<a class="breadcrumb__item" href="">
Reviews
</a>
</li>
<li class="breadcrumb__item-container">
<span class="breadcrumb__item --is-active" aria-current="page">
American Express Gold Card
</span>
</li>
</ol>
Base button class is a generic button
.
--bare
class removes generic button styling so that it looks like a regular text link.
--primary
class gives us our primary button styling.
--secondary
gives us our yellow secondary ghost button.
--action
class gives us our green action button styling.
--neutral
class gives us our light gray button styling.
--ghost
class gives us a light blue ghost button structuring.
--beta
class reduces font-size to 14px.
--small
class reducesd overall border and padding on button creating a small button.
<button class="button --bare">Bare Button</button>
<button class="button --primary">Primary Button</button>
<button class="button --secondary">Secondary Button</button>
<button class="button --action">Action Button</button>
<button class="button --neutral">Neutral Button</button>
<button class="button --ghost">Blue Ghost Button</button>
<button class="button --small --bare">Bare Button</button>
<button class="button --small --primary">Primary Button</button>
<button class="button --small --secondary">Secondary Button</button>
<button class="button --small --action">Action Button</button>
<button class="button --small --neutral">Neutral Button</button>
<button class="button --small --ghost">Blue Ghost Button</button>
<button class="button --beta --bare">Bare Button</button>
<button class="button --beta --primary">Primary Button</button>
<button class="button --beta --secondary">Secondary Button</button>
<button class="button --beta --action">Action Button</button>
<button class="button --beta --neutral">Neutral Button</button>
<button class="button --beta --ghost">Blue Ghost Button</button>
<button class="button --small --beta --bare">Bare Button</button>
<button class="button --small --beta --primary">Primary Button</button>
<button class="button --small --beta --secondary">Secondary Button</button>
<button class="button --small --beta --action">Action Button</button>
<button class="button --small --beta --neutral">Neutral Button</button>
<button class="button --small --beta --ghost">Blue Ghost Button</button>
<button class="button --primary --is-disabled">Disabled Button</button>
<button class="button --beta --primary --is-disabled">Disabled Button</button>
<button class="button --small --primary --is-disabled">Disabled Button</button>
<button class="button --small --beta --primary --is-disabled">Disabled Button</button>
<button class="button --action">
Go
<svg class="button__icon" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</button>
<button class="button --action --beta">
Go
<svg class="button__icon" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</button>
<button class="button --action --small">
Go
<svg class="button__icon" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</button>
<button class="button --action --beta --small">
Go
<svg class="button__icon" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</button>
<button class="button --primary --is-loading">Primary Button</button>
<button class="button --secondary --is-loading">Secondary Button</button>
<button class="button --action --is-loading">Action Button</button>
<button class="button --neutral --is-loading">Neutral Button</button>
<button class="button --ghost --is-loading">Blue Ghost Button</button>
Bare styling for vertical cards
Use heading-style
and +heading-*
style and size classes for header and +text-size-*
size classes for body copy.
<ul class="grid --equal-height --with-gutter">
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card" data-faux-anchor="true">
<div class="card__image-container --16:9">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body">
<h2 class="heading-secondary +heading-zeta +mg-top-sm">
<a href="">How This Outrageously Comfortable Mess...</a>
</h2>
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
</div>
</article>
</li>
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card" data-faux-anchor="true">
<div class="card__image-container --16:9">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body">
<h2 class="heading-secondary +heading-zeta +mg-top-sm">
<a href="">American Residents Born Between 1936 and 1966 Are...</a>
</h2>
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
</div>
</article>
</li>
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card" data-faux-anchor="true">
<div class="card__image-container --16:9">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body">
<h2 class="heading-secondary +heading-zeta +mg-top-sm">
<a href="">Best New 2016 Sedans</a>
</h2>
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
</div>
</article>
</li>
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card" data-faux-anchor="true">
<div class="card__image-container --16:9">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body">
<h2 class="heading-secondary +heading-zeta +mg-top-sm">
<a href="">The New 2016 Crossovers</a>
</h2>
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
</div>
</article>
</li>
</ul>
Cards with bordered modifiers.
--bordered
class adds a gray border around all sides.
--bordered --yellow-accent
adds a yellow 3.5px
left border accent.
--bordered --blue-accent
adds a blue 3.5px
left border accent.
--bordered --light-blue-accent
adds a blue 3.5px
left border accent.
Use heading-style
and +heading-*
style and size classes for header and +text-size-*
size classes for body copy.
<ul class="grid --equal-height --with-gutter">
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card --bordered --blue-accent" data-faux-anchor="true">
<div class="card__image-container --16:9">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body --with-padding">
<h2 class="heading-secondary +heading-zeta">
<a href="">How This Outrageously Comfortable Mess...</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card --bordered --yellow-accent" data-faux-anchor="true">
<div class="card__image-container --16:9">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body --with-padding">
<h2 class="heading-secondary +heading-zeta">
<a href="">American Residents Born Between 1936 and 1966 Are...</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card --bordered" data-faux-anchor="true">
<div class="card__image-container --16:9">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body --with-padding">
<h2 class="heading-secondary +heading-zeta">
<a href="">Best New 2016 Sedans</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card --bordered" data-faux-anchor="true">
<div class="card__image-container --16:9">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body --with-padding">
<h2 class="heading-secondary +heading-zeta">
<a href="">The New 2016 Crossovers</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
</ul>
Cards with body copy.
If cards container body copy, wrap the <h*>
tag and <p>
tag in a <div>
so that the
additional content is pushed to the bottom of the container.
Use heading-style
and +heading-*
style and size classes for header and +text-size-*
size classes for body copy.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in metus at dui aliquet volutpat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lectus vulputate, sodales ligula ut, elementum ligula.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lectus vulputate, sodales ligula ut, elementum ligula. Proin in metus at dui aliquet volutpat.
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lectus vulputate, sodales ligula ut, elementum ligula. Proin in metus at dui aliquet volutpat.
<ul class="grid --equal-height --with-gutter">
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card --bordered --blue-accent" data-faux-anchor="true">
<div class="card__image-container --16:9">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body --with-padding">
<div>
<h2 class="heading-secondary +heading-epsilon">
<a href="">How This Outrageously Comfortable Mess...</a>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit.
Proin in metus at dui aliquet volutpat.
</p>
</div>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card --bordered --blue-accent" data-faux-anchor="true">
<div class="card__image-container --16:9">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body --with-padding">
<div>
<h2 class="heading-secondary +heading-epsilon">
<a href="">American Residents Born Between 1936 and 1966 Are...</a>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lectus vulputate,
sodales ligula ut, elementum ligula.
</p>
</div>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card --bordered --blue-accent" data-faux-anchor="true">
<div class="card__image-container --16:9">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body --with-padding">
<div>
<h2 class="heading-secondary +heading-epsilon">
<a href="">Best New 2016 Sedans</a>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lectus vulputate,
sodales ligula ut, elementum ligula. Proin in metus at dui aliquet volutpat.
</p>
</div>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card --bordered --yellow-accent" data-faux-anchor="true">
<div class="card__body --vertical-body --with-padding">
<div>
<h2 class="heading-secondary +heading-epsilon">
<a href="">The New 2016 Crossovers</a>
</h2>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lectus vulputate,
sodales ligula ut, elementum ligula. Proin in metus at dui aliquet volutpat.
</p>
</div>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
</ul>
Cards with bordered modifiers.
--4:1
modifier class to give image 4:1 aspect ratio.
Use heading-style
and +heading-*
style and size classes for header and +text-size-*
size classes for body copy.
<ul class="grid --equal-height --with-gutter">
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card --bordered --blue-accent" data-faux-anchor="true">
<div class="card__image-container --4:1">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body --with-padding">
<h2 class="heading-secondary +heading-zeta">
<a href="">How This Outrageously Comfortable Mess...</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card --bordered --yellow-accent" data-faux-anchor="true">
<div class="card__image-container --4:1">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body --with-padding">
<h2 class="heading-secondary +heading-zeta">
<a href="">American Residents Born Between 1936 and 1966 Are...</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card --bordered" data-faux-anchor="true">
<div class="card__image-container --4:1">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body --with-padding">
<h2 class="heading-secondary +heading-zeta">
<a href="">Best New 2016 Sedans</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--xs size-1of4--md +mg-bottom">
<article class="card --vertical-card --bordered" data-faux-anchor="true">
<div class="card__image-container --4:1">
<img class="card__image" src="https://placehold.it/350x200" alt="" />
</div>
<div class="card__body --vertical-body --with-padding">
<h2 class="heading-secondary +heading-zeta">
<a href="">The New 2016 Crossovers</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">VIA YAHOO</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
</ul>
<ul class="grid --equal-height --with-gutter">
<li class="grid-cell size-1of2--sm +mg-bottom">
<article class="media --mobile-stacked --flush card --bordered --blue-accent" data-faux-anchor="true">
<div class="media__figure card__image-container --large-square">
<img class="card__image" src="https://placehold.it/150x150" alt="" />
</div>
<div class="card__body --with-padding media__body">
<h2 class="heading-secondary +heading-epsilon">
<a chref="#">
Card Title
</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">Credit</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--sm +mg-bottom">
<article class="media --flush --mobile-stacked card --bordered --blue-accent" data-faux-anchor="true">
<div class="media__figure card__image-container --large-square">
<img class="card__image" src="https://placehold.it/150x150" alt="" />
</div>
<div class="card__body --with-padding media__body">
<h2 class="heading-secondary +heading-epsilon">
<a href="#">
Card Title
</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">Credit</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--sm +mg-bottom">
<article class="media --flush --mobile-stacked card --bordered --blue-accent" data-faux-anchor="true">
<div class="media__figure card__image-container --large-square">
<img class="card__image" src="https://placehold.it/150x150" alt="" />
</div>
<div class="card__body --with-padding media__body">
<h2 class="heading-secondary +heading-epsilon">
<a href="#">
Card Title
</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">Credit</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--sm +mg-bottom">
<article class="media --flush --mobile-stacked card --bordered --blue-accent" data-faux-anchor="true">
<div class="media__figure card__image-container --large-square">
<img class="card__image" src="https://placehold.it/150x150" alt="" />
</div>
<div class="card__body --with-padding media__body">
<h2 class="heading-secondary +heading-epsilon">
<a href="#">
Card Title
</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">Credit</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</article>
</li>
</ul>
<ul class="grid --equal-height --with-gutter">
<li class="grid-cell size-1of2--sm +mg-bottom">
<article class="box --sm card --bordered --blue-accent --boxed-mobile-stacked">
<div class="media --mobile-stacked" data-faux-anchor="true">
<div class="media__figure card__image-container --large-square">
<img class="card__image" src="https://placehold.it/150x150" alt="" />
</div>
<div class="card__body media__body">
<h2 class="heading-secondary +heading-epsilon">
<a chref="#">
Card Title
</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">Credit</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--sm +mg-bottom">
<article class="box --sm card --bordered --blue-accent --boxed-mobile-stacked">
<div class="media --mobile-stacked" data-faux-anchor="true">
<div class="media__figure card__image-container --large-square">
<img class="card__image" src="https://placehold.it/150x150" alt="" />
</div>
<div class="card__body media__body">
<h2 class="heading-secondary +heading-epsilon">
<a href="#">
Card Title
</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">Credit</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--sm +mg-bottom">
<article class="box --sm card --bordered --blue-accent --boxed-mobile-stacked">
<div class="media --mobile-stacked" data-faux-anchor="true">
<div class="media__figure card__image-container --large-square">
<img class="card__image" src="https://placehold.it/150x150" alt="" />
</div>
<div class="card__body media__body">
<h2 class="heading-secondary +heading-epsilon">
<a href="#">
Card Title
</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">Credit</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</div>
</article>
</li>
<li class="grid-cell size-1of2--sm +mg-bottom">
<article class="box --sm card --bordered --blue-accent --boxed-mobile-stacked">
<div class="media --mobile-stacked" data-faux-anchor="true">
<div class="media__figure card__image-container --large-square">
<img class="card__image" src="https://placehold.it/150x150" alt="" />
</div>
<div class="card__body media__body">
<h2 class="heading-secondary +heading-epsilon">
<a href="#">
Card Title
</a>
</h2>
<div class="card__additional">
<span class="subheading --thin +fg-gray-dark">Credit</span>
<span class="icon +fill-blue">
<svg class="icon__glyph" width="30px" height="13px" viewBox="0 0 30 13" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="arrow-charcoal" fill="">
<path d="M28,6.33492073 L28.1913673,6.14505595 L28.1913673,6.85494405 L28,6.66507927 L28,6.33492073 Z M27.3296576,7 L22.6478428,11.6450559 L23.3521572,12.3549441 L28.8956818,6.85494405 L29.2534347,6.5 L28.8956818,6.14505595 L23.3521572,0.645055948 L22.6478428,1.35494405 L27.3296576,6 L0,6 L0,7 L27.3296576,7 Z" id="Combined-Shape"></path>
</g>
</g>
</svg>
</span>
</div>
</div>
</div>
</article>
</li>
</ul>
.form-checkbox
styles our general input type="checkbox"
form elements.
Modifiers:
--small
: smaller input which reduces the size of the box, along with reduced font size and padding.
<label class="form-checkbox">
<input class="form-checkbox__input" type="checkbox" />
<span class="form-checkbox__faux-input icon">
<svg class="icon__glyph" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
</svg>
</span>
Default Checkbox
</label>
<label class="form-checkbox">
<input class="form-checkbox__input" type="checkbox" checked="checked" />
<span class="form-checkbox__faux-input icon">
<svg class="icon__glyph" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
</svg>
</span>
Active Checkbox
</label>
<label class="form-checkbox">
<input class="form-checkbox__input" type="checkbox" disabled="disabled" />
<span class="form-checkbox__faux-input icon">
<svg class="icon__glyph" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
</svg>
</span>
Disabled Checkbox
</label>
<label class="form-checkbox">
<input class="form-checkbox__input" type="checkbox" checked="checked" disabled="disabled" />
<span class="form-checkbox__faux-input icon">
<svg class="icon__glyph" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
</svg>
</span>
Disabled and Checked Checkbox
</label>
<div class="form-element-container">
<label class="form-checkbox --has-error">
<input class="form-checkbox__input" type="checkbox" />
<span class="form-checkbox__faux-input icon">
<svg class="icon__glyph" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
</svg>
</span>
Checkbox with error
</label>
<span class="form-element-help --has-error">Please make a selection.</span>
</div>
<label class="form-checkbox --small">
<input class="form-checkbox__input" type="checkbox" />
<span class="form-checkbox__faux-input icon">
<svg class="icon__glyph" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
</svg>
</span>
Default Checkbox
</label>
<label class="form-checkbox --small">
<input class="form-checkbox__input" type="checkbox" checked="checked" />
<span class="form-checkbox__faux-input icon">
<svg class="icon__glyph" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
</svg>
</span>
Active Checkbox
</label>
<label class="form-checkbox --small">
<input class="form-checkbox__input" type="checkbox" disabled="disabled" />
<span class="form-checkbox__faux-input icon">
<svg class="icon__glyph" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
</svg>
</span>
Disabled Checkbox
</label>
<label class="form-checkbox --small">
<input class="form-checkbox__input" type="checkbox" checked="checked" disabled="disabled" />
<span class="form-checkbox__faux-input icon">
<svg class="icon__glyph" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
</svg>
</span>
Disabled and Checked Checkbox
</label>
<div class="form-element-container">
<label class="form-checkbox --has-error --small">
<input class="form-checkbox__input" type="checkbox" />
<span class="form-checkbox__faux-input icon">
<svg class="icon__glyph" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
</svg>
</span>
Checkbox with error
</label>
<span class="form-element-help --has-error">Please make a selection.</span>
</div>
.form-input
styles our general input
or textarea
form elements.
Modifiers:
--small
: smaller input with reduces border bottom active/focused/error/success states, along with reduced font size and padding.
<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
positions form-label
and form-control
items next to each other along with aligning them on their baseline.
<div class="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>
</div>
<br />
<div class="form-inline">
<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>
</div>
.form-control
container class with modifiers that allow either data-attr
content before or after input.
Modifiers:
--with-left-icon
: allows us to input a character before the form-input
. Generally used for currency. Also needs data-format
data-attr.
--with-right-icon
: allows us to input a character after the form-input
. Generally used for percentages. Also needs data-format
data-attr.
--small
: reduces font-size of special character to match the form-input
font size.
<label class="form-label" for="textInput">Text input</label>
<div class="form-control --with-left-icon" data-format="$">
<input class="form-input" placeholder="Input text here..." type="text" id="textInput" />
</div>
<br />
<label class="form-label" for="textInput">Text input</label>
<div class="form-control --with-right-icon" data-format="%">
<input class="form-input" placeholder="Input text here..." type="text" id="textInput" />
</div>
<br />
<label class="form-label" for="textInput">Text input</label>
<div class="form-control --with-left-icon --small" data-format="$">
<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" />
</div>
<br />
<label class="form-label" for="textInput">Text input</label>
<div class="form-control --with-right-icon --small" data-format="%">
<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" />
</div>
.--has-error
state modifier of form-control
container class targets .form-input
and updates state to show error.
.form-element-help
is used to display helper/error messaging below form element.
<label class="form-label" for="textInput">Text input with error</label>
<div class="form-control --has-error">
<input class="form-input" placeholder="Input text here..." type="text" id="textInput" />
</div>
<span class="form-element-help --has-error">Error text.</span>
<br />
<label class="form-label" for="textInput">Small text input with error</label>
<div class="form-control --small --has-error">
<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" />
</div>
<span class="form-element-help --has-error">Error text.</span>
<br />
<label class="form-label" for="textInput">Text input with icons and error</label>
<div class="form-control --with-left-icon --has-error" data-format="$">
<input class="form-input" placeholder="Input text here..." type="text" id="textInput" />
</div>
<span class="form-element-help --has-error">Error text.</span>
<br />
<label class="form-label" for="textInput">Small text input with icons and error</label>
<div class="form-control --with-left-icon --small --has-error" data-format="$">
<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" />
</div>
<span class="form-element-help --has-error">Error text.</span>
.--is-successful
state modifier of .form-control
container class targets .form-input
and updates state to show success state.
<label class="form-label" for="textInput">Text input with success state</label>
<div class="form-control --is-successful">
<input class="form-input" placeholder="Input text here..." type="text" id="textInput" />
</div>
<br />
<label class="form-label" for="textInput">Small text input with success state</label>
<div class="form-control --small --is-successful">
<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" />
</div>
<br />
<label class="form-label" for="textInput">Text input with icons and success state</label>
<div class="form-control --with-left-icon --is-successful" data-format="$">
<input class="form-input" placeholder="Input text here..." type="text" id="textInput" />
</div>
<br />
<label class="form-label" for="textInput">Small text input with icons and success state</label>
<div class="form-control --with-left-icon --small --is-successful" data-format="$">
<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" />
</div>
.form-input
styles our general input
or textarea
form elements.
<label class="form-label" for="textInput">Text input</label>
<div class="form-control">
<textarea class="form-input" name="" id=""></textarea>
</div>
.--is-readonly
state modifier of .form-control
container class targets .form-input
and updates state to show readonly.
.--is-readonly
should be used in conjuntion with a nested child of .form-input-static
inside .form-control
since it
Because the readonly state isn't using an input
, the label
tag should be replaces as a span
or div
.
The native form elements themselves should use readonly
attribute on the elements themselves when applicable.
<span class="form-label" for="textInput">Text input</span>
<div class="form-control --is-readonly">
<div class="form-input-static" id="textInput">
Input text here...
</div>
</div>
<br />
<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" readonly />
</div>
<br />
<span class="form-label" for="textInput">Text input</span>
<div class="form-control --is-readonly">
<div class="form-input-static --small" id="textInput">
Input text here...
</div>
</div>
<br />
<label class="form-label" for="textInput">Text input</label>
<div class="form-control --is-readonly">
<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" readonly />
</div>
.--is-disabled
state modifier of .form-control
container class targets .form-input
and updates state to show disabled.
The native form elements themselves should use disabled
attribute on the elements themselves when applicable.
<label class="form-label" for="textInput">Text input</label>
<div class="form-control --is-disabled">
<input class="form-input" placeholder="Input text here..." type="text" id="textInput" />
</div>
<br />
<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" disabled />
</div>
<br />
<label class="form-label" for="textInput">Text input</label>
<div class="form-control --is-disabled">
<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" />
</div>
<br />
<label class="form-label" for="textInput">Text input</label>
<div class="form-control">
<input class="form-input --small" placeholder="Input text here..." type="text" id="textInput" disabled />
</div>
.form-select
styles our native select
form elements.
Generally wrapped in .form-control
container class with modifier of --with-right-icon
to allow for use of icon arrow.
<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>
<label class="form-label">This is a select dropdown</label>
<div class="form-control --with-right-icon --is-readonly">
<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 +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>
<br />
<label class="form-label">This is a select dropdown</label>
<div class="form-control --with-right-icon --is-readonly">
<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 +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>
<label class="form-label">This is a select dropdown</label>
<div class="form-control --with-right-icon --is-disabled">
<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 +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>
<br />
<label class="form-label">This is a select dropdown</label>
<div class="form-control --with-right-icon --is-disabled">
<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 +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>
<label class="form-label">This is a select dropdown</label>
<div class="form-control --with-right-icon">
<button class="form-select">
Selected item
<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>
</button>
<ul class="form-select__list-container --is-active">
<li class="form-select__list-item --with-input --is-selected">
<span class="form-select__radio"></span>
<span class="form-select__input-label">Item One</span>
</li>
<li class="form-select__list-item --with-input">
<span class="form-select__radio"></span>
<span class="form-select__input-label">Item Two</span>
</li>
<li class="form-select__list-item --with-input">
<span class="form-select__radio"></span>
<span class="form-select__input-label">Item Three</span>
</li>
</ul>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
<label class="form-label">This is a select dropdown</label>
<div class="form-control --with-right-icon">
<button class="form-select">
Selected item
<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>
</button>
<ul class="form-select__list-container --is-active">
<li class="form-select__list-item --with-input --is-selected">
<span class="form-select__checkbox">
<svg class="icon__glyph" width="12" height="9" viewBox="0 0 12 9" fill-rule="evenodd">
<path d="M4.1 6.1L1.4 3.4 0 4.9 4.1 9l7.6-7.6L10.3 0z"></path>
</svg>
</span>
<span class="form-select__input-label">Item One</span>
</li>
<li class="form-select__list-item --with-input">
<span class="form-select__checkbox"></span>
<span class="form-select__input-label">Item Two</span>
</li>
<li class="form-select__list-item --with-input">
<span class="form-select__checkbox"></span>
<span class="form-select__input-label">Item Three</span>
</li>
</ul>
</div>
<br />
<br />
<br />
<br />
<br />
<br />
Used for styling <h*>
tags with different font familys
.heading-{ primary | secondary | tertiary }
heading-primary = Acumin Pro Extra Condensed
heading-secondary = Calibre Semibold
heading-tertiary = Calibre Regular
<h1 class="heading-primary"></h1>
<h3 class="heading-secondary"></h3>
Can be used in conjunction with +heading-*
utility classes for different heading sizes, and +fg-*
color utilities to style them.
<h1 class="heading-primary +heading-beta">Primary styled beta heading</h1>
<br />
<h2 class="heading-secondary +heading-gamma">Secondary styled gamma heading</h2>
<br />
<h3 class="heading-tertiary +heading-delta">Tertiary styled delta heading</h3>
<span class="icon">
<svg class="icon__glyph">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/toolkit/svg/svg.svg#twitter"></use>
</svg>
</span>
.icon --xl
.icon --lg
.icon --md
.icon
.icon --sm
.icon --xs
<div class="+mg-bottom-xs">
<span class="icon --xl">
<svg class="icon__glyph">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/toolkit/svg/svg.svg#twitter"></use>
</svg>
</span>
<code>.icon --xl</code>
</div>
<div class="+mg-bottom-xs">
<span class="icon --lg">
<svg class="icon__glyph">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/toolkit/svg/svg.svg#twitter"></use>
</svg>
</span>
<code>.icon --lg</code>
</div>
<div class="+mg-bottom-xs">
<span class="icon --md">
<svg class="icon__glyph">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/toolkit/svg/svg.svg#twitter"></use>
</svg>
</span>
<code>.icon --md</code>
</div>
<div class="+mg-bottom-xs">
<span class="icon">
<svg class="icon__glyph">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/toolkit/svg/svg.svg#twitter"></use>
</svg>
</span>
<code>.icon</code>
</div>
<div class="+mg-bottom-xs">
<span class="icon --sm">
<svg class="icon__glyph">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/toolkit/svg/svg.svg#twitter"></use>
</svg>
</span>
<code>.icon --sm</code>
</div>
<div class="+mg-bottom-xs">
<span class="icon --xs">
<svg class="icon__glyph">
<use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="../assets/toolkit/svg/svg.svg#twitter"></use>
</svg>
</span>
<code>.icon --xs</code>
</div>
Inline tables are made up of the .table
object along with it's modifiers of --bordered-rows
and --spacing-xxs
.
The table-inline
class adds a layer of UI to the table object to give us this look and feel.
table-inline__caption
is added to thew caption
tag, which should always be the first child element of tables.
table-inline__header-row
is added to the thead
to style the table header.
table-inline__header-cell
is added to the individual th
to style the table header cells.
table-inline__footer
is added to the tfoot
if there is one needed.
One thing to note about the tfoot
element, if needed to be full width of the table, we need to add colspan=" number of columns of table "
to be full width.
Header one | Header two | Header three |
---|---|---|
You pay off a loan faster with a 15 years mortgage because the term is shorter, so you end up free of mortgage . | ||
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-xxs table-inline">
<caption class="table-inline__caption">
Inline table heading
</caption>
<thead class="table-inline__header-row">
<tr>
<th class="table-inline__header-cell">
Header one
</th>
<th class="table-inline__header-cell">
Header two
</th>
<th class="table-inline__header-cell">
Header three
</th>
</tr>
</thead>
<tfoot class="table-inline__footer">
<tr>
<td colspan="3">
You pay off a loan faster with a 15 years mortgage because the term is shorter, so you end up free of mortgage .
</td>
</tr>
</tfoot>
<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>
Numerical inline tables have the same structure as regular inline tables, except we add another modifier to the table
tag.
--numerical
structures the table differently, giveing numerical rows right aligned copy along with updating the numbers to
have a font family of Roboto.
Header one | Header two | Header three |
---|---|---|
You pay off a loan faster with a 15 years mortgage because the term is shorter, so you end up free of mortgage . | ||
data one | $500 | data three |
data two | $500 | $500 |
data three | $500 | $500 |
<div class="table-container">
<table class="table --bordered-rows --spacing-xxs table-inline --numerical">
<caption class="table-inline__caption">
Inline table heading
</caption>
<thead class="table-inline__header-row">
<tr>
<th class="table-inline__header-cell">
Header one
</th>
<th class="table-inline__header-cell">
Header two
</th>
<th class="table-inline__header-cell">
Header three
</th>
</tr>
</thead>
<tfoot class="table-inline__footer">
<tr>
<td colspan="3">
You pay off a loan faster with a 15 years mortgage because the term is shorter, so you end up free of mortgage .
</td>
</tr>
</tfoot>
<tbody>
<tr>
<td>
data one
</td>
<td>
$500
</td>
<td>
data three
</td>
</tr>
<tr>
<td>
data two
</td>
<td>
$500
</td>
<td>
$500
</td>
</tr>
<tr>
<td>
data three
</td>
<td>
$500
</td>
<td>
$500
</td>
</tr>
</tbody>
</table>
</div>
Sortble tables have some extra classes and structuring added to them.
The table headers now have nested buttons with icons inside that have states for changing background colors.
Table cells also have a class of table-inline__row-cell
added to them so that we can add/remove --is-active
to them to highlight the cells when they active.
You pay off a loan faster with a 15 years mortgage because the term is shorter, so you end up free of mortgage . | |||
data one | $500 | data three | data three |
data two | $500 | $500 | $500 |
data three | $500 | $500 | $500 |
<div class="table-container">
<table class="table --bordered-rows --spacing-xxs table-inline --numerical">
<caption class="table-inline__caption">
Inline table heading
</caption>
<thead class="table-inline__header-row">
<tr>
<th class="table-inline__header-cell --is-active">
<button class="table-inline__sort-button button --bare --full-width">
Header one
<span class="table-inline__sort-icon icon --xxs +fill-gray-darker">
<svg class="table-inline__header-icon icon__glyph" width="7px" height="4px" viewBox="0 0 7 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="rate-table__sorter-arrow">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
</button>
</th>
<th class="table-inline__header-cell">
<button class="table-inline__sort-button button --bare --full-width">
Header two
<span class="table-inline__sort-icon icon --xxs +fill-gray-darker">
<svg class="table-inline__header-icon icon__glyph" width="7px" height="4px" viewBox="0 0 7 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="rate-table__sorter-arrow">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
</button>
</th>
<th class="table-inline__header-cell">
<button class="table-inline__sort-button button --bare --full-width">
Header three
<span class="table-inline__sort-icon icon --xxs +fill-gray-darker">
<svg class="table-inline__header-icon icon__glyph" width="7px" height="4px" viewBox="0 0 7 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="rate-table__sorter-arrow">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
</button>
</th>
<th class="table-inline__header-cell">
<button class="table-inline__sort-button button --bare --full-width">
Header four
<span class="table-inline__sort-icon icon --xxs +fill-gray-darker">
<svg class="table-inline__header-icon icon__glyph" width="7px" height="4px" viewBox="0 0 7 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" class="rate-table__sorter-arrow">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
</button>
</th>
</tr>
</thead>
<tfoot class="table-inline__footer">
<tr>
<td colspan="4">
You pay off a loan faster with a 15 years mortgage because the term is shorter, so you end up free of mortgage .
</td>
</tr>
</tfoot>
<tbody class="table-inline__body">
<tr>
<td class="table-inline__row-cell --is-active">
data one
</td>
<td class="table-inline__row-cell">
$500
</td>
<td class="table-inline__row-cell">
data three
</td>
<td class="table-inline__row-cell">
data three
</td>
</tr>
<tr>
<td class="table-inline__row-cell --is-active">
data two
</td>
<td class="table-inline__row-cell">
$500
</td>
<td class="table-inline__row-cell">
$500
</td>
<td class="table-inline__row-cell">
$500
</td>
</tr>
<tr>
<td class="table-inline__row-cell --is-active">
data three
</td>
<td class="table-inline__row-cell">
$500
</td>
<td class="table-inline__row-cell">
$500
</td>
<td class="table-inline__row-cell">
$500
</td>
</tr>
</tbody>
</table>
</div>
<span class="numeral --alpha">
1.45
<span class="numeral__accent">%</span>
</span>
<span class="numeral --alpha">
<span class="numeral__accent">$</span>
545
</span>
<div class="grid --with-gutter">
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --alpha">
1.45
<span class="numeral__accent --percentage">%</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --beta">
1.45
<span class="numeral__accent --percentage">%</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --gamma">
1.45
<span class="numeral__accent --percentage">%</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --delta">
1.45
<span class="numeral__accent --percentage">%</span>
</span>
</div>
</div>
<div class="grid --with-gutter">
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --alpha">
<span class="numeral__accent">$</span>
545
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --beta">
<span class="numeral__accent">$</span>
545
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --gamma">
<span class="numeral__accent">$</span>
545
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --delta">
<span class="numeral__accent">$</span>
545
</span>
</div>
</div>
<div class="grid --with-gutter">
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --alpha">
5
<span class="numeral__accent --percentage">Mo</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --beta">
5
<span class="numeral__accent --percentage">Mo</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --gamma">
5
<span class="numeral__accent --percentage">Mo</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --delta">
5
<span class="numeral__accent --percentage">Mo</span>
</span>
</div>
</div>
<span class="numeral --beta --with-accent-secondary">
1.45
<span class="numeral__accent --with-secondary">
% APR
<span class="numeral__secondary">
<span class="icon --xs +fill-red">
<svg class="icon__glyph" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 15 15" id="trend-up" width="100%" height="100%">
<title>trend-up-red</title>
<path d="M12.002 2.364h-6.53v-2h9.485v9.485h-2V4.21L2.131 14.34.764 12.877 12.002 2.364z" fill-rule="evenodd"></path>
</svg>
</span>
<span class="+fg-red">UP</span>
</span>
</span>
</span>
<div class="grid --with-gutter">
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --alpha --calibre-regular">
1.45
<span class="numeral__accent --percentage">%</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --beta --calibre-regular">
1.45
<span class="numeral__accent --percentage">%</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --gamma --calibre-regular">
1.45
<span class="numeral__accent --percentage">%</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --delta --calibre-regular">
1.45
<span class="numeral__accent --percentage">%</span>
</span>
</div>
</div>
<div class="grid --with-gutter">
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --alpha --calibre-regular">
<span class="numeral__accent">$</span>
545
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --beta --calibre-regular">
<span class="numeral__accent">$</span>
545
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --gamma --calibre-regular">
<span class="numeral__accent">$</span>
545
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --delta --calibre-regular">
<span class="numeral__accent">$</span>
545
</span>
</div>
</div>
<div class="grid --with-gutter">
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --alpha --calibre-regular">
5
<span class="numeral__accent --percentage">Mo</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --beta --calibre-regular">
5
<span class="numeral__accent --percentage">Mo</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --gamma --calibre-regular">
5
<span class="numeral__accent --percentage">Mo</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --delta --calibre-regular">
5
<span class="numeral__accent --percentage">Mo</span>
</span>
</div>
</div>
<div class="grid --with-gutter">
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --alpha --calibre-semibold">
1.45
<span class="numeral__accent --percentage">%</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --beta --calibre-semibold">
1.45
<span class="numeral__accent --percentage">%</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --gamma --calibre-semibold">
1.45
<span class="numeral__accent --percentage">%</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --delta --calibre-semibold">
1.45
<span class="numeral__accent --percentage">%</span>
</span>
</div>
</div>
<div class="grid --with-gutter">
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --alpha --calibre-semibold">
<span class="numeral__accent">$</span>
545
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --beta --calibre-semibold">
<span class="numeral__accent">$</span>
545
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --gamma --calibre-semibold">
<span class="numeral__accent">$</span>
545
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --delta --calibre-semibold">
<span class="numeral__accent">$</span>
545
</span>
</div>
</div>
<div class="grid --with-gutter">
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --alpha --calibre-semibold">
5
<span class="numeral__accent --percentage">Mo</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --beta --calibre-semibold">
5
<span class="numeral__accent --percentage">Mo</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --gamma --calibre-semibold">
5
<span class="numeral__accent --percentage">Mo</span>
</span>
</div>
<div class="size-1of4--sm +mg-bottom">
<span class="numeral --delta --calibre-semibold">
5
<span class="numeral__accent --percentage">Mo</span>
</span>
</div>
</div>
Styles ordered lists with custom blue numbers.
Only to be used on ordered lists.
<ol class="ordered-list">
<li class="ordered-list__item">Item one</li>
<li class="ordered-list__item">Item two</li>
<li class="ordered-list__item">Item three</li>
<li class="ordered-list__item">Item four</li>
</ol>
Gives us styling for ordered list items.
<ol class="ordered-list">
<li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
<li>Aliquam tincidunt mauris eu risus.</li>
<li>Vestibulum auctor dapibus neque.</li>
</ol>
Desktop style shows block arrows at small screen and titles Previous and Next at larger screens
Mobile style shows block arrows. Block arrows can be forced on all screens with class --block-arrow
added to ul.pagination-numeric
<h4>Desktop Style</h4>
<nav role="navigation" aria-label="Pagination Navigation">
<ul class="pagination-numeric">
<li class="pagination-numeric__marker">
<a href="#" class="pagination-numeric__marker-item --marker-page" aria-label="First Page">
<span class="pagination-numeric__marker-arrow">«</span>
<span class="pagination-numeric__marker-title --previous">Previous</span>
</a>
</li>
<!-- array of links -->
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 1">1</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 2">2</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 3">3</a>
</li>
<!-- "Three Dots" Separator -->
<li class="pagination-numeric__marker">
<span class="pagination-numeric__marker-item --is-disabled">...</span>
</li>
<!-- array of links -->
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item --is-active" href="#" aria-label="Goto Page 4, Current Page" aria-current="true">4</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 5">5</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item --marker-page" href="#" rel="next" aria-label="Next Page">
<span class="pagination-numeric__marker-title --next">Next</span>
<span class="pagination-numeric__marker-arrow">»</span>
</a>
</li>
</ul>
</nav>
<h4>Desktop Style With Disabled Page Navigation</h4>
<nav role="navigation" aria-label="Pagination Navigation">
<ul class="pagination-numeric">
<li class="pagination-numeric__marker">
<span class="pagination-numeric__marker-item --marker-page --is-disabled" aria-label="First Page">
<span class="pagination-numeric__marker-arrow">«</span>
<span class="pagination-numeric__marker-title --previous">Previous</span>
</span>
</li>
<!-- array of links -->
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item --is-active" href="#" aria-label="Goto Page 1">1</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 2">2</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 3">3</a>
</li>
<!-- "Three Dots" Separator -->
<li class="pagination-numeric__marker">
<span class="pagination-numeric__marker-item --is-disabled">...</span>
</li>
<!-- array of links -->
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 4, Current Page" aria-current="true">4</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 5">5</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item --marker-page" href="#" rel="next" aria-label="Next Page">
<span class="pagination-numeric__marker-title --next">Next</span>
<span class="pagination-numeric__marker-arrow">»</span>
</a>
</li>
</ul>
</nav>
<h4>Mobile/Forced Block Style</h4>
<nav role="navigation" aria-label="Pagination Navigation">
<ul class="pagination-numeric --block-arrow">
<li class="pagination-numeric__marker">
<a href="#" class="pagination-numeric__marker-item --marker-page" aria-label="First Page">
<span class="pagination-numeric__marker-arrow">«</span>
<span class="pagination-numeric__marker-title --previous">Previous</span>
</a>
</li>
<!-- array of links -->
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 1">1</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 2">2</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 3">3</a>
</li>
<!-- "Three Dots" Separator -->
<li class="pagination-numeric__marker">
<span class="pagination-numeric__marker-item --is-disabled">...</span>
</li>
<!-- array of links -->
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item --is-active" href="#" aria-label="Goto Page 4, Current Page" aria-current="true">4</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 5">5</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item --marker-page" href="#" rel="next" aria-label="Next Page">
<span class="pagination-numeric__marker-title --next">Next</span>
<span class="pagination-numeric__marker-arrow">»</span>
</a>
</li>
</ul>
</nav>
<h4>Mobile/Forced Block Style With Disabled Page Navigation</h4>
<nav role="navigation" aria-label="Pagination Navigation">
<ul class="pagination-numeric --block-arrow">
<li class="pagination-numeric__marker">
<span class="pagination-numeric__marker-item --marker-page --is-disabled" aria-label="First Page">
<span class="pagination-numeric__marker-arrow">«</span>
<span class="pagination-numeric__marker-title --previous">Previous</span>
</span>
</li>
<!-- array of links -->
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item --is-active" href="#" aria-label="Goto Page 1">1</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 2">2</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 3">3</a>
</li>
<!-- "Three Dots" Separator -->
<li class="pagination-numeric__marker">
<span class="pagination-numeric__marker-item --is-disabled">...</span>
</li>
<!-- array of links -->
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 4, Current Page" aria-current="true">4</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item" href="#" aria-label="Goto Page 5">5</a>
</li>
<li class="pagination-numeric__marker">
<a class="pagination-numeric__marker-item --marker-page" href="#" rel="next" aria-label="Next Page">
<span class="pagination-numeric__marker-title --next">Next</span>
<span class="pagination-numeric__marker-arrow">»</span>
</a>
</li>
</ul>
</nav>
Notice: Deprecated in favor of the responsive 'Numeric Pagination' above
<p>Notice: Deprecated in favor of the responsive 'Numeric Pagination' above</p>
<nav role="navigation" aria-label="Pagination Navigation">
<ul class="pagination-numbers">
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item" href="" aria-label="First Page">«</a>
</li>
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item" href="" rel="prev" aria-label="Previous Page">
<span class="+mg-right-xxs">«</span>
Previous
</a>
</li>
<!-- array of links -->
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item" href="" aria-label="Goto Page 1">1</a>
</li>
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item" href="" aria-label="Goto Page 2">2</a>
</li>
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item" href="" aria-label="Goto Page 3">3</a>
</li>
<!-- "Three Dots" Separator -->
<li class="pagination-numbers__marker">
<span class="pagination-numbers__marker-item --is-disabled">...</span>
</li>
<!-- array of links -->
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item --is-active" href="" aria-label="Goto Page 4, Current Page" aria-current="true">4</a>
</li>
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item" href="" aria-label="Goto Page 5">5</a>
</li>
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item" href="" rel="next" aria-label="Next Page">
Next
<span class="+mg-left-xxs">»</span>
</a>
</li>
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item" href="" aria-label="Last Page">»</a>
</li>
</ul>
</nav>
Notice: Deprecated in favor of the responsive 'Numeric Pagination' above
<p>Notice: Deprecated in favor of the responsive 'Numeric Pagination' above</p>
<nav role="navigation" aria-label="Pagination Navigation">
<ul class="pagination-numbers">
<li class="pagination-numbers__marker">
<a class="button --primary pagination-numbers__marker-item" href="" aria-label="First Page">«</a>
</li>
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item" href="" rel="prev" aria-label="Previous Page">«</a>
</li>
<!-- array of links -->
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item" href="" aria-label="Goto Page 1">1</a>
</li>
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item" href="" aria-label="Goto Page 2">2</a>
</li>
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item" href="" aria-label="Goto Page 3">3</a>
</li>
<!-- "Three Dots" Separator -->
<li class="pagination-numbers__marker">
<span class="pagination-numbers__marker-item --is-disabled">...</span>
</li>
<!-- array of links -->
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item --is-active" href="" aria-label="Goto Page 4, Current Page" aria-current="true">4</a>
</li>
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item" href="" aria-label="Goto Page 5">5</a>
</li>
<li class="pagination-numbers__marker">
<a class="pagination-numbers__marker-item" href="" rel="next" aria-label="Next Page">»</a>
</li>
<li class="pagination-numbers__marker">
<a class="button --primary pagination-numbers__marker-item" href="" aria-label="Last Page">»</a>
</li>
</ul>
</nav>
Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.
<p>Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit. Nullam quis risus eget urna mollis ornare vel eu leo. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec ullamcorper nulla non metus auctor fringilla. Donec id elit non mi porta gravida at eget metus.</p>
If you decide to assume a lease, you’ll be responsible for the rest of the payments on the car. Lessees who want to hand over their leases turn to websites such as SwapALease, LeaseTrader and LeaseCompare to find someone to fill that role.
If you decide to assume a lease, you’ll be responsible for the rest of the payments on the car. Lessees who want to hand over their leases turn to websites such as SwapALease, LeaseTrader and LeaseCompare to find someone to fill that role.
- Quote cite
<blockquote>
<p>
If you decide to assume a lease, you’ll be responsible for the rest of the payments on the car.
Lessees who want to hand over their leases turn to websites such as SwapALease, LeaseTrader and
LeaseCompare to find someone to fill that role.
</p>
</blockquote>
<blockquote>
<p>
If you decide to assume a lease, you’ll be responsible for the rest of the payments on the car.
Lessees who want to hand over their leases turn to websites such as SwapALease, LeaseTrader and
LeaseCompare to find someone to fill that role.
</p>
<cite>- Quote cite</cite>
</blockquote>
Some pull quote without a cite.
Some pull quote with a cite.
- Quote cite
<blockquote class="pull-quote">
<p class="pull-quote__copy">
Some pull quote without a cite.
</p>
</blockquote>
<blockquote class="pull-quote">
<p class="pull-quote__copy">
Some pull quote with a cite.
</p>
<cite class="pull-quote__cite">
- Quote cite
</cite>
</blockquote>
Some pull quote without a cite.
Some pull quote with a cite.
- Quote cite
<blockquote class="pull-quote --small-quotes">
<p class="pull-quote__copy">
Some pull quote without a cite.
</p>
</blockquote>
<blockquote class="pull-quote --small-quotes">
<p class="pull-quote__copy">
Some pull quote with a cite.
</p>
<cite class="pull-quote__cite">
- Quote cite
</cite>
</blockquote>
<label class="form-radio">
<input class="form-radio__input" type="radio" />
<span class="form-radio__faux-input"></span>
Default Radio
</label>
<label class="form-radio">
<input class="form-radio__input" type="radio" checked="checked" />
<span class="form-radio__faux-input"></span>
Checked Radio
</label>
<label class="form-radio">
<input class="form-radio__input" type="radio" disabled="disabled" />
<span class="form-radio__faux-input"></span>
Disabled Radio
</label>
<label class="form-radio">
<input class="form-radio__input" type="radio" checked="checked" disabled="disabled" />
<span class="form-radio__faux-input"></span>
Checked and Disabled Radio
</label>
<div class="form-element-container">
<label class="form-radio --has-error">
<input class="form-radio__input" type="radio" />
<span class="form-radio__faux-input"></span>
Radio with error state
</label>
<span class="form-element-help --has-error">Please make a selection.</span>
</div>
30 year fixed refinance
APR
Monthly Payment
Term of Loan
|
---|
<table>
<tr class="rate-table-header">
<th class="page-wrapper +pd-all-none">
<div class="grid --align-middle +clear-border">
<div class="grid-cell size-full size-4of12--md">
<div class="rate-table-header__cell">
<span class="rate-table-header__copy">
30 year fixed refinance
</span>
</div>
</div>
<div class="grid-cell size-2of12">
<div class="rate-table-header__cell">
<span class="rate-table-header__copy">
APR
</span>
</div>
</div>
<div class="grid-cell size-2of12">
<div class="rate-table-header__cell">
<span class="rate-table-header__copy">
Monthly Payment
</span>
</div>
</div>
<div class="grid-cell size-2of12">
<div class="rate-table-header__cell">
<span class="rate-table-header__copy">
Term of Loan
</span>
</div>
</div>
</div>
</th>
</tr>
</table>
|
---|
<table>
<tr class="rate-table-header">
<th class="page-wrapper +pd-all-none">
<div class="grid --align-middle +clear-border">
<div class="grid-cell size-full size-4of12--md">
<div class="rate-table-header__cell --is-active --is-ascending">
<button class="rate-table-header__copy button --bare --full-width">
30 year fixed refinance
<span class="icon --xxs +fill-gray-darker">
<svg class="rate-table-header__icon icon__glyph" width="7px" height="4px" viewBox="0 0 7 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
</button>
</div>
</div>
<div class="grid-cell size-2of12">
<div class="rate-table-header__cell">
<button class="rate-table-header__copy button --bare --full-width">
APR
<span class="icon --xxs +fill-gray-darker">
<svg class="rate-table-header__icon icon__glyph" width="7px" height="4px" viewBox="0 0 7 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
</button>
</div>
</div>
<div class="grid-cell size-2of12">
<div class="rate-table-header__cell">
<button class="rate-table-header__copy button --bare --full-width">
Monthly Payment
<span class="icon --xxs +fill-gray-darker">
<svg class="rate-table-header__icon icon__glyph" width="7px" height="4px" viewBox="0 0 7 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
</button>
</div>
</div>
<div class="grid-cell size-2of12">
<div class="rate-table-header__cell">
<button class="rate-table-header__copy button --bare --full-width">
Term of Loan
<span class="icon --xxs +fill-gray-darker">
<svg class="rate-table-header__icon icon__glyph" width="7px" height="4px" viewBox="0 0 7 4" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g id="Page-1" stroke="none" stroke-width="1" fill="" fill-rule="evenodd">
<g id="Icons" transform="translate(-134.000000, -43.000000)" fill="">
<polygon id="caret-small-down" points="134.707107 43 134 43.6965437 137.353553 47 140.707107 43.6965437 140 43 137.358734 45.6018093"></polygon>
</g>
</g>
</svg>
</span>
</button>
</div>
</div>
</div>
</th>
</tr>
</table>
<select name="" id="">
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
<option value="">Option 4</option>
<option value="">Option 5</option>
</select>
Used as a subheading like style
Has a --thin
modifier
Can be used in conjuntion with +fg-*
color utility classes
.subheading
<p class="subheading"></p>
<p class="subheading --thin"></p>
Sub heading style
Thin sub heading style
<p class="subheading +fg-blue">Sub heading style</p>
<p class="subheading --thin +fg-gray-dark">Thin sub heading style</p>
Basic tabbed interface. By default they will be flush right.
Modifiers:
--align-center
: Center aligns tab within block.
--align-right
: Right aligns tab within block.
--fill
: Each tab takes up equal amount of space fill the tab block.
<ul class="tabs" role="tablist">
<li class="tabs__item" role="presentation">
<button class="tabs__link --is-active" id="foo-tab" type="button" role="tab" aria-controls="foo" aria-selected="true">Foo</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link" id="bar-tab" type="button" role="tab" aria-controls="bar">Bar</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link" id="qux-tab" type="button" role="tab" aria-controls="qux">Qux</button>
</li>
</ul>
<ul class="tabs --align-center" role="tablist">
<li class="tabs__item" role="presentation">
<button class="tabs__link --is-active" id="foo-tab" href="#foo" type="button" role="tab" aria-controls="foo" aria-selected="true">Foo</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link" id="bar-tab" type="button" role="tab" aria-controls="bar">Bar</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link" id="qux-tab" type="button" role="tab" aria-controls="qux">Qux</button>
</li>
</ul>
<ul class="tabs --align-right" role="tablist">
<li class="tabs__item" role="presentation">
<button class="tabs__link --is-active" id="foo-tab" type="button" role="tab" aria-controls="foo" aria-selected="true">Foo</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link" id="bar-tab" type="button" role="tab" aria-controls="bar">Bar</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link" id="qux-tab" type="button" role="tab" aria-controls="qux">Qux</button>
</li>
</ul>
<ul class="tabs --fill" role="tablist">
<li class="tabs__item" role="presentation">
<button class="tabs__link --is-active" id="foo-tab" type="button" role="tab" aria-controls="foo" aria-selected="true">Foo</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link" id="bar-tab" type="button" role="tab" aria-controls="bar">Bar</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link" id="qux-tab" type="button" role="tab" aria-controls="qux">Qux</button>
</li>
</ul>
Block tabbed interface. By default they will be flush right.
Modifiers:
--block
: Adds block styling to tabs container (background and border).
--align-center
: Center aligns tab within block.
--align-right
: Right aligns tab within block.
--fill
: Each tab takes up equal amount of space fill the tab block.
tab__item
give the active state and and changes background/color along with adding border-bottom.
Modifiers:
--is-active
--separated
: adds border separation between tab items
<ul class="tabs --boxed" role="tablist">
<li class="tabs__item --separated" role="presentation">
<button class="tabs__link --is-active" id="foo-tab" type="button" role="tab" aria-controls="foo" aria-selected="true">Foo</button>
</li>
<li class="tabs__item --separated" role="presentation">
<button class="tabs__link" id="bar-tab" type="button" role="tab" aria-controls="bar">Bar</button>
</li>
<li class="tabs__item --separated" role="presentation">
<button class="tabs__link" id="qux-tab" type="button" role="tab" aria-controls="qux">Qux</button>
</li>
</ul>
<ul class="tabs --boxed --align-right" role="tablist">
<li class="tabs__item --separated" role="presentation">
<button class="tabs__link --is-active" id="foo-tab" type="button" role="tab" aria-controls="foo" aria-selected="true">Foo</button>
</li>
<li class="tabs__item --separated" role="presentation">
<button class="tabs__link" id="bar-tab" type="button" role="tab" aria-controls="bar">Bar</button>
</li>
<li class="tabs__item --separated" role="presentation">
<button class="tabs__link" id="qux-tab" type="button" role="tab" aria-controls="qux">Qux</button>
</li>
</ul>
<ul class="tabs --boxed --fill" role="tablist">
<li class="tabs__item --separated" role="presentation">
<button class="tabs__link --is-active" id="foo-tab" type="button" role="tab" aria-controls="foo" aria-selected="true">Foo</button>
</li>
<li class="tabs__item --separated " role="presentation">
<button class="tabs__link" id="bar-tab" type="button" role="tab" aria-controls="bar">Bar</button>
</li>
<li class="tabs__item --separated " role="presentation">
<button class="tabs__link" id="qux-tab" type="button" role="tab" aria-controls="qux">Qux</button>
</li>
</ul>
Small tabbed interface. By default they will be flush right.
<ul class="tabs" role="tablist">
<li class="tabs__item" role="presentation">
<button class="tabs__link --small --is-active" id="foo-tab" type="button" role="tab" aria-controls="foo" aria-selected="true">Foo</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link --small" id="bar-tab" type="button" role="tab" aria-controls="bar">Bar</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link --small" id="qux-tab" type="button" role="tab" aria-controls="qux">Qux</button>
</li>
</ul>
<ul class="tabs --align-center" role="tablist">
<li class="tabs__item" role="presentation">
<button class="tabs__link --small --is-active" id="foo-tab" type="button" role="tab" aria-controls="foo" aria-selected="true">Foo</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link --small" id="bar-tab" type="button" role="tab" aria-controls="bar">Bar</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link --small" id="qux-tab" type="button" role="tab" aria-controls="qux">Qux</button>
</li>
</ul>
<ul class="tabs --align-right" role="tablist">
<li class="tabs__item" role="presentation">
<button class="tabs__link --small --is-active" id="foo-tab" type="button" role="tab" aria-controls="foo" aria-selected="true">Foo</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link --small" id="bar-tab" type="button" role="tab" aria-controls="bar">Bar</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link --small" id="qux-tab" type="button" role="tab" aria-controls="qux">Qux</button>
</li>
</ul>
<ul class="tabs --fill" role="tablist">
<li class="tabs__item" role="presentation">
<button class="tabs__link --small --is-active" id="foo-tab" type="button" role="tab" aria-controls="foo" aria-selected="true">Foo</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link --small" id="bar-tab" type="button" role="tab" aria-controls="bar">Bar</button>
</li>
<li class="tabs__item" role="presentation">
<button class="tabs__link --small" id="qux-tab" type="button" role="tab" aria-controls="qux">Qux</button>
</li>
</ul>
<ul class="tabs --boxed --fill" role="tablist">
<li class="tabs__item --separated" role="presentation">
<button class="tabs__link --small --is-active" id="foo-tab" type="button" role="tab" aria-controls="foo" aria-selected="true">Foo</button>
</li>
<li class="tabs__item --separated " role="presentation">
<button class="tabs__link --small" id="bar-tab" type="button" role="tab" aria-controls="bar">Bar</button>
</li>
<li class="tabs__item --separated " role="presentation">
<button class="tabs__link --small" id="qux-tab" type="button" role="tab" aria-controls="qux">Qux</button>
</li>
</ul>
Used for styling <a>
tags
.text-link
Also has a modifier to remove underline
<a class="text-link" href="">text link</a>
<a class="text-link --plain" href="">plain text link</a>
Can be used in conjunction with +text-size-*
utility classes for different sized copy.
<a class="text-link">Text link style</a>
<br />
<a class="text-link --plain">Bare text link</a>
<br />
<a class="text-link +text-size-md">Medium sized text link</a>
Used for showing and hiding content when an accordion isn't needed. When you need several sections of toggled content, use an accorion instead.
This is an example of toggled content.
This is an example of toggled content.
<div>
<button class="button --bare text-link --plain +text-size-nm">
(+) Content Toggle
</button>
<p class="+text-size-sm +pd-top-xs +display-none">
This is an example of toggled content.
</p>
</div>
<br />
<div>
<button class="button --bare text-link --plain +text-size-nm">
(-) Content Toggle
</button>
<p class="+text-size-sm +pd-top-xs">
This is an example of toggled content.
</p>
</div>
<div class="tooltip">
<button class="button --bare tooltip__icon +text-center">i</button>
<div class="tooltip__box --pos-right" style="display: none;">
<div class="tooltip__arrow-up"></div>
<ul class="list-bare">
<li class="tooltip__copy +mg-bottom-xxs">
The face value of a loan, independent of the interest charged on the loan amount.
</li>
<li class="tooltip__copy +mg-bottom-xxs">
Payments made to a lender by a borrower in exchange for a loan.
</li>
</ul>
</div>
</div>
<div class="tooltip --is-active">
<button class="button --bare tooltip__icon +text-center">i</button>
<div class="tooltip__box --above --pos-left">
<div class="tooltip__arrow-down"></div>
<ul class="list-bare">
<li class="tooltip__copy +mg-bottom-xxs">
The face value of a loan, independent of the interest charged on the loan amount.
</li>
<li class="tooltip__copy +mg-bottom-xxs">
Payments made to a lender by a borrower in exchange for a loan.
</li>
</ul>
</div>
</div>
<div class="tooltip --is-active +text-center">
<button class="button --bare tooltip__icon +text-center">i</button>
<div class="tooltip__box --above --pos-center">
<div class="tooltip__arrow-down"></div>
<ul class="list-bare">
<li class="tooltip__copy +mg-bottom-xxs">
The face value of a loan, independent of the interest charged on the loan amount.
</li>
<li class="tooltip__copy +mg-bottom-xxs">
Payments made to a lender by a borrower in exchange for a loan.
</li>
</ul>
</div>
</div>
<div class="tooltip --is-active +text-right">
<button class="button --bare tooltip__icon +text-center">i</button>
<div class="tooltip__box --above --pos-right">
<div class="tooltip__arrow-down"></div>
<ul class="list-bare">
<li class="tooltip__copy +mg-bottom-xxs">
The face value of a loan, independent of the interest charged on the loan amount.
</li>
<li class="tooltip__copy +mg-bottom-xxs">
Payments made to a lender by a borrower in exchange for a loan.
</li>
</ul>
</div>
</div>
<div class="tooltip --is-active">
<button class="button --bare tooltip__icon +text-center">i</button>
<div class="tooltip__box --pos-left">
<div class="tooltip__arrow-up"></div>
<ul class="list-bare">
<li class="tooltip__copy +mg-bottom-xxs">
The face value of a loan, independent of the interest charged on the loan amount.
</li>
<li class="tooltip__copy +mg-bottom-xxs">
Payments made to a lender by a borrower in exchange for a loan.
</li>
</ul>
</div>
</div>
<div class="tooltip --is-active +text-center">
<button class="button --bare tooltip__icon +text-center">i</button>
<div class="tooltip__box --pos-center">
<div class="tooltip__arrow-up"></div>
<ul class="list-bare">
<li class="tooltip__copy +mg-bottom-xxs">
The face value of a loan, independent of the interest charged on the loan amount.
</li>
<li class="tooltip__copy +mg-bottom-xxs">
Payments made to a lender by a borrower in exchange for a loan.
</li>
</ul>
</div>
</div>
<div class="tooltip --is-active +text-right">
<button class="button --bare tooltip__icon +text-center">i</button>
<div class="tooltip__box --pos-right">
<div class="tooltip__arrow-up"></div>
<ul class="list-bare">
<li class="tooltip__copy +mg-bottom-xxs">
The face value of a loan, independent of the interest charged on the loan amount.
</li>
<li class="tooltip__copy +mg-bottom-xxs">
Payments made to a lender by a borrower in exchange for a loan.
</li>
</ul>
</div>
</div>
Social Block
Social Block
Small Social Block