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

  • 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.

<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>

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.

<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.

<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.

  • 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.

<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

<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

<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.



Form element helper text.
Form element helper text.
<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.
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
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.

arrow-icon
<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

arrow-icon

arrow-icon
<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

arrow-icon

arrow-icon
<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

  • Item One
  • Item Two
  • Item Three






<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

  • Item One
  • Item Two
  • Item Three






<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.

Inline table heading
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.

Inline table heading
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.

Inline table heading
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 trend-up-red 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.

  1. Item one
  2. Item two
  3. Item three
  4. 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.

  1. Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
  2. Aliquam tincidunt mauris eu risus.
  3. 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>

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>

Social Block

Social Block

<div class="social-block">
	<a class="social-block__svg-container --bg-blue" href="https://www.facebook.com/Bankrate/" target="_blank">
		<svg class="social-block__svg-icon">
			<use xlink:href="assets/toolkit/svg/svg.svg#facebook"></use>
		</svg>
	</a>
	<a class="social-block__svg-container --bg-midnight" href="https://twitter.com/bankrate" target="_blank">
		<svg class="social-block__svg-icon">
			<use xlink:href="assets/toolkit/svg/svg.svg#twitter"></use>
		</svg>
	</a>
</div>

Small Social Block

<div class="social-block">
	<a class="social-block__svg-container --bg-blue --small" href="https://www.facebook.com/Bankrate/" target="_blank">
		<svg class="social-block__svg-icon --small">
			<use xlink:href="assets/toolkit/svg/svg.svg#facebook"></use>
		</svg>
	</a>
	<a class="social-block__svg-container --bg-midnight --small" href="https://twitter.com/bankrate" target="_blank">
		<svg class="social-block__svg-icon --small">
			<use xlink:href="assets/toolkit/svg/svg.svg#twitter"></use>
		</svg>
	</a>
</div>

Social Share

Default Social Share

<div class="sticky b-test" style="width: 50px;">
	<div data-social-share="true" class="social-share">
		<span class="social-share__label">Share</span>
		<a href="http://www.facebook.com/share.php?u=[URL]&title=[TITLE]" class=" social-share__button --facebook" data-share-button="true">
			<span class="icon +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#facebook"></use>
				</svg>
			</span>
		</a>
		<a href="http://twitter.com/intent/tweet?status=[TITLE]+[URL]" class=" social-share__button --twitter" data-share-button="true">
			<span class="icon +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#twitter"></use>
				</svg>
			</span>
		</a>
		<a href="#" class=" social-share__button --email" data-share-button="true">
			<span class="icon --sm +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#email-icon"></use>
				</svg>
			</span>
		</a>
		<a href="#" class=" social-share__button --show-more --less" data-share-button="true">
			<span class="icon --sm +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#open-icon"></use>
				</svg>
			</span>
		</a>
		<div class="social-share__divide"></div>
		<a href="http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE]" class=" social-share__button --linkedin" data-share-button="true">
			<span class="icon +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#linkedin"></use>
				</svg>
			</span>
		</a>
		<a href="https://plus.google.com/share?url=[URL]" class=" social-share__button --google" data-share-button="true">
			<span class="icon +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#google-plus"></use>
				</svg>
			</span>
		</a>
		<a href="http://www.reddit.com/submit?url=[URL]&title=[TITLE]" class=" social-share__button --reddit --wide" data-share-button="true">
			<span class="social-share__wide-icon icon +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#reddit"></use>
				</svg>
			</span>
		</a>
		<a href="http://pinterest.com/pin/create/bookmarklet/?media=[MEDIA]&url=[URL]&is_video=false&description=[TITLE]" class=" social-share__button --pinterest" data-share-button="true">
			<span class="icon +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#pinterest-p"></use>
				</svg>
			</span>
		</a>
	</div>
</div>

Active Social Share

<div class="sticky b-test" style="width: 50px;">
	<div data-social-share="true" class="social-share">
		<span class="social-share__label">Share</span>
		<a href="http://www.facebook.com/share.php?u=[URL]&title=[TITLE]" class=" social-share__button --facebook" data-share-button="true">
			<span class="icon +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#facebook"></use>
				</svg>
			</span>
		</a>
		<a href="http://twitter.com/intent/tweet?status=[TITLE]+[URL]" class=" social-share__button --twitter" data-share-button="true">
			<span class="icon +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#twitter"></use>
				</svg>
			</span>
		</a>
		<a href="#" class=" social-share__button --email" data-share-button="true">
			<span class="icon --sm +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#email-icon"></use>
				</svg>
			</span>
		</a>
		<a href="#" class=" social-share__button --show-more" data-share-button="true">
			<span class="icon --sm +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#open-icon"></use>
				</svg>
			</span>
		</a>
		<div class="social-share__divide"></div>
		<a href="http://www.linkedin.com/shareArticle?mini=true&url=[URL]&title=[TITLE]&source=[SOURCE]" class=" social-share__button --linkedin" data-share-button="true">
			<span class="icon +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#linkedin"></use>
				</svg>
			</span>
		</a>
		<a href="https://plus.google.com/share?url=[URL]" class=" social-share__button --google" data-share-button="true">
			<span class="icon +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#google-plus"></use>
				</svg>
			</span>
		</a>
		<a href="http://www.reddit.com/submit?url=[URL]&title=[TITLE]" class=" social-share__button --reddit --wide" data-share-button="true">
			<span class="social-share__wide-icon icon +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#reddit"></use>
				</svg>
			</span>
		</a>
		<a href="http://pinterest.com/pin/create/bookmarklet/?media=[MEDIA]&url=[URL]&is_video=false&description=[TITLE]" class=" social-share__button --pinterest" data-share-button="true">
			<span class="icon +fill-white">
				<svg class="icon__glyph">
					<use xlink:href="assets/toolkit/svg/svg.svg#pinterest-p"></use>
				</svg>
			</span>
		</a>
	</div>
</div>

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>

Nav Tabs

Navigation tabbed interface.

<nav class="tabs --fill" role="navigation">
	<a class="tabs__item tabs__link --is-active" id="foo-tab" href="#foo" role="tab" aria-controls="foo" aria-selected="true">Foo</a>
	<a class="tabs__item tabs__link " id="bar-tab" href="#bar" role="tab" aria-controls="bar">Bar</a>
	<a class="tabs__item tabs__link " id="qux-tab" href="#qux" role="tab" aria-controls="qux">Qux</a>
</nav>

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

  • The face value of a loan, independent of the interest charged on the loan amount.
  • Payments made to a lender by a borrower in exchange for a loan.
  • The face value of a loan, independent of the interest charged on the loan amount.
  • Payments made to a lender by a borrower in exchange for a loan.
  • The face value of a loan, independent of the interest charged on the loan amount.
  • Payments made to a lender by a borrower in exchange for a loan.
<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

  • The face value of a loan, independent of the interest charged on the loan amount.
  • Payments made to a lender by a borrower in exchange for a loan.
  • The face value of a loan, independent of the interest charged on the loan amount.
  • Payments made to a lender by a borrower in exchange for a loan.
  • The face value of a loan, independent of the interest charged on the loan amount.
  • Payments made to a lender by a borrower in exchange for a loan.
<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>