Components
Accordions
Default Accordion
<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>Active Accordion
<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>Breadcrumbs
Breadcrumbs
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>Button
Base
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>Small Buttons
<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>Beta Buttons
<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>Small Beta Buttons
<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>Disbled State
<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>With Icon
<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>With Loader
<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>Cards
Bare Vertical Card
Bare styling for vertical cards
Use heading-style and +heading-* style and size classes for header and +text-size-* size classes for body copy.
-
-
-
Best New 2016 Sedans
VIA YAHOO -
The New 2016 Crossovers
VIA YAHOO
<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>Bordered Vertical Card
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.
-
-
-
Best New 2016 Sedans
VIA YAHOO -
The New 2016 Crossovers
VIA YAHOO
<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>Vertical Card With Body Copy
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.
-
How This Outrageously Comfortable Mess...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin in metus at dui aliquet volutpat.
VIA YAHOO -
American Residents Born Between 1936 and 1966 Are...
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec sit amet lectus vulputate, sodales ligula ut, elementum ligula.
VIA YAHOO -
Best New 2016 Sedans
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.
VIA YAHOO -
The New 2016 Crossovers
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.
VIA YAHOO
<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>Vertical Card With Four To One Image Ratio
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.
-
-
-
Best New 2016 Sedans
VIA YAHOO -
The New 2016 Crossovers
VIA YAHOO
<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>Horizontal Card
-
Card Title
Credit -
Card Title
Credit -
Card Title
Credit -
Card Title
Credit
<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>Boxed Horizontal Cards
-
Card Title
Credit -
Card Title
Credit -
Card Title
Credit -
Card Title
Credit
<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
Checkbox
.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.
Please make a selection.
<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>Small Checkbox
Please make a selection.
<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
Form Input
.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>Inline Form Input
.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 Input With Left Or Right Symbols
.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>Form Input Error State
.--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.
Error text.
Error text.
<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>Form Input Success State
.--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 Textarea
.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>Form Input Readonly
.--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.
Text input
Text input
Input text here...
Text input
Input text here...
<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>Disabled Form Input
.--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
Form Select
.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>Form Select Readonly
<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>Disabled Form Select
<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>Form Select Dropdown With Radio Inputs
<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 />Form Select Dropdown With Checkbox Inputs
<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 />Heading Styles
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.
Primary styled beta heading
Secondary styled gamma heading
Tertiary styled delta heading
<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>Icon
Icon
<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 Sizes
.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
Inline Table
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 Table
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>Sortable Inline Table
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>Numeral
Numeral Percentage
1.45
%
<span class="numeral --alpha">
1.45
<span class="numeral__accent">%</span>
</span>Numeral Currency
$
545
<span class="numeral --alpha">
<span class="numeral__accent">$</span>
545
</span>Numeral Sizes
1.45
%
1.45
%
1.45
%
1.45
%
$
545
$
545
$
545
$
545
5
Mo
5
Mo
5
Mo
5
Mo
<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>Numeral With Seconadary Content
1.45
% APR
UP
<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>Calibre Regular Numerals
1.45
%
1.45
%
1.45
%
1.45
%
$
545
$
545
$
545
$
545
5
Mo
5
Mo
5
Mo
5
Mo
<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>Calibre Semibold Numerals
1.45
%
1.45
%
1.45
%
1.45
%
$
545
$
545
$
545
$
545
5
Mo
5
Mo
5
Mo
5
Mo
<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>Numerical Ordered List
Styles ordered lists with custom blue numbers.
Only to be used on ordered lists.
- Item one
- Item two
- Item three
- Item four
<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>Ordered List
Gives us styling for ordered list items.
- Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
- Aliquam tincidunt mauris eu risus.
- Vestibulum auctor dapibus neque.
<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>Pagination
Numeric Pagination
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
Desktop Style
Desktop Style With Disabled Page Navigation
Mobile/Forced Block Style
Mobile/Forced Block Style With Disabled Page Navigation
<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>Numerical Pagination
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>Mobile Numerical Pagination
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>Paragraph
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>Quotes
Blockquote
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>Pull Quote
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>Small Pull Quote
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>Radio
Please make a selection.
<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>Rate Table Header
Rate Table Header
|
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>Rate Table Header With Sorter
|
|
|---|
<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
<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>Subheading
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>Tabs
Tabs
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>Boxed Tabs
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 Tabs
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>Text Link
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>Toggle
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>Tooltip
Default Tooltip
<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>Active Top Positioned Tooltip
<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>Active Bottom Positioned Tooltip
<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