Modal Title
This is a primary color modal.
Kitchen Sink
Accordions
Accordions require jQuery and the Mercury UI Framework accordion plugin to work. Note: You will need to initialize them by calling $().mercuryuiAccordion();.
You can also open and close accordions via the plugin through actions by targeting the id of the accordion: $('#accordion-content-1').mercuryuiAccordion('open'); and $('#accordion-content-1').mercuryuiAccordion('close');.
Callbacks are provided for beforeOpen, afterOpen, beforeClose, and afterClose. An example for afterOpen would be: $('#accordion-content-1').mercuryuiAccordion('open', { afterOpen: function(){ alert('Accordion opened!'); } });
Create custom branded accordions by using the accordion color mixin: @include accordion-color($color, $background-color, $border-color).
Base
Some content.
<div class="accordions">
<div class="accordion accordion-is-shown">
<button type="button" class="button button--white accordion--button" id="accordion-button-1" aria-controls="accordion-content-1"
aria-selected="true" role="tab">
Accordion 1
<span class="arrow"></span>
</button>
<div class="accordion--content" id="accordion-content-1" aria-labelledby="accordion-button-1" tabindex="0" aria-hidden="false"
aria-expanded="true" role="tabpanel">
<div class="accordion--content-inner">
Some content.
</div>
</div>
</div>
<div class="accordion">
<button type="button" class="button button--white accordion--button" id="accordion-button-2" aria-controls="accordion-content-2"
aria-selected="false" role="tab">
Accordion 2
<span class="arrow"></span>
</button>
<div class="accordion--content" id="accordion-content-2" aria-labelledby="accordion-button-2" tabindex="-1" aria-hidden="true"
aria-expanded="false" role="tabpanel">
<div class="accordion--content-inner">
Some content.
</div>
</div>
</div>
</div>
Primary Color
Some content.
<div class="accordions">
<div class="accordion accordion--primary-color accordion-is-shown">
<button type="button" class="button button--primary-color accordion--button" id="accordion-button-3" aria-controls="accordion-content-3"
aria-selected="true" role="tab">
Accordion 1
<span class="arrow"></span>
</button>
<div class="accordion--content" id="accordion-content-3" aria-labelledby="accordion-button-3" tabindex="0" aria-hidden="false"
aria-expanded="true" role="tabpanel">
<div class="accordion--content-inner">
Some content.
</div>
</div>
</div>
<div class="accordion accordion--primary-color">
<button type="button" class="button button--primary-color accordion--button" id="accordion-button-4" aria-controls="accordion-content-4"
aria-selected="false" role="tab">
Accordion 2
<span class="arrow"></span>
</button>
<div class="accordion--content" id="accordion-content-4" aria-labelledby="accordion-button-4" tabindex="-1" aria-hidden="true"
aria-expanded="false" role="tabpanel">
<div class="accordion--content-inner">
Some content.
</div>
</div>
</div>
</div>
Secondary Color
Some content.
<div class="accordions">
<div class="accordion accordion--secondary-color accordion-is-shown">
<button type="button" class="button button--secondary-color accordion--button" id="accordion-button-5" aria-controls="accordion-content-5"
aria-selected="true" role="tab">
Accordion 1
<span class="arrow"></span>
</button>
<div class="accordion--content" id="accordion-content-5" aria-labelledby="accordion-button-5" tabindex="0" aria-hidden="false"
aria-expanded="true" role="tabpanel">
<div class="accordion--content-inner">
Some content.
</div>
</div>
</div>
<div class="accordion accordion--secondary-color">
<button type="button" class="button button--secondary-color accordion--button" id="accordion-button-6" aria-controls="accordion-content-6"
aria-selected="false" role="tab">
Accordion 2
<span class="arrow"></span>
</button>
<div class="accordion--content" id="accordion-content-6" aria-labelledby="accordion-button-6" tabindex="-1" aria-hidden="true"
aria-expanded="false" role="tabpanel">
<div class="accordion--content-inner">
Some content.
</div>
</div>
</div>
</div>
Tertiary Color
Some content.
<div class="accordions">
<div class="accordion accordion--tertiary-color accordion-is-shown">
<button type="button" class="button button--tertiary-color accordion--button" id="accordion-button-7" aria-controls="accordion-content-7" aria-selected="true" role="tab">
Accordion 1
<span class="arrow"></span>
</button>
<div class="accordion--content" id="accordion-content-7" aria-labelledby="accordion-button-7" tabindex="0" aria-hidden="false" aria-expanded="true" role="tabpanel">
<div class="accordion--content-inner">
Some content.
</div>
</div>
</div>
<div class="accordion accordion--tertiary-color">
<button type="button" class="button button--tertiary-color accordion--button" id="accordion-button-8" aria-controls="accordion-content-8" aria-selected="false" role="tab">
Accordion 2
<span class="arrow"></span>
</button>
<div class="accordion--content" id="accordion-content-8" aria-labelledby="accordion-button-8" tabindex="-1" aria-hidden="true" aria-expanded="false" role="tabpanel">
<div class="accordion--content-inner">
Some content.
</div>
</div>
</div>
</div>
Alerts
Create custom branded alerts by using the alert color mixin: @include alert-color($border-color, $background-color).
This is a base alert. It may have a link.
<div class="alert" role="alert">
This is a base alert. <a href="#" class="alert--link">It may have a link.</a>
</div>
This is an error alert. It may have a link.
<div class="alert alert--error" role="alert">
This is an error alert. <a href="#" class="alert--link">It may have a link.</a>
</div>
This is an warning alert. It may have a link.
<div class="alert alert--warning" role="alert">
This is a warning alert. <a href="#" class="alert--link">It may have a link.</a>
</div>
This is a success alert. It may have a link.
<div class="alert alert--success" role="alert">
This is a success alert. <a href="#" class="alert--link">It may have a link.</a>
</div>
This is an info alert. It may have a link.
<div class="alert alert--info" role="alert">
This is an info alert. <a href="#" class="alert--link">It may have a link.</a>
</div>
Badges
Alignment
<button type="button" class="button button--white">
Button
<span class="badge badge--right">1</span>
</button>
<button type="button" class="button button--white">
<span class="badge badge--left">1</span>
Button
</button>
Colors
<button type="button" class="button button--white">
Button
<span class="badge badge--primary-color badge--right">1</span>
</button>
<button type="button" class="button button--white">
Button
<span class="badge badge--secondary-color badge--right">1</span>
</button>
<button type="button" class="button button--white">
Button
<span class="badge badge--tertiary-color badge--right">1</span>
</button>
<button type="button" class="button button--white">
Button
<span class="badge badge--error-color badge--right">1</span>
</button>
<button type="button" class="button button--white">
Button
<span class="badge badge--warning-color badge--right">1</span>
</button>
<button type="button" class="button button--white">
Button
<span class="badge badge--success-color badge--right">1</span>
</button>
<button type="button" class="button button--white">
Button
<span class="badge badge--info-color badge--right">1</span>
</button>
<button type="button" class="button button--primary-color">
Button
<span class="badge badge--white-color badge--right">1</span>
</button>
Sizes
<button type="button" class="button button--white button--smallest">
Button
<span class="badge badge--smallest badge--primary-color badge--right">1</span>
</button>
<button type="button" class="button button--white button--smaller">
Button
<span class="badge badge--smaller badge--primary-color badge--right">1</span>
</button>
<button type="button" class="button button--white button--small">
Button
<span class="badge badge--small badge--primary-color badge--right">1</span>
</button>
<button type="button" class="button button--white">
Button
<span class="badge badge--primary-color badge--right">1</span>
</button>
<button type="button" class="button button--white button--large">
Button
<span class="badge badge--large badge--primary-color badge--right">1</span>
</button>
<button type="button" class="button button--white button--larger">
Button
<span class="badge badge--larger badge--primary-color badge--right">1</span>
</button>
<button type="button" class="button button--white button--largest">
Button
<span class="badge badge--largest badge--primary-color badge--right">1</span>
</button>
Bands
Buttons
Button Groups
Base
<div class="button-group">
<button type="button" class="button button--white">Button One</button>
<button type="button" class="button button--white">Button Two</button>
</div>
XXS & Up
<div class="button-group--xxs">
<button type="button" class="button button--white">Button One</button>
<button type="button" class="button button--white">Button Two</button>
<button type="button" class="button button--white">Button Three</button>
</div>
XS & Up
<div class="button-group--xs">
<button type="button" class="button button--white">Button One</button>
<button type="button" class="button button--white">Button Two</button>
<button type="button" class="button button--white">Button Three</button>
<button type="button" class="button button--white">Button Four</button>
</div>
SM & Up
<div class="button-group--sm">
<button type="button" class="button button--white">Button One</button>
<button type="button" class="button button--white">Button Two</button>
<button type="button" class="button button--white">Button Three</button>
<button type="button" class="button button--white">Button Four</button>
<button type="button" class="button button--white">Button Five</button>
</div>
MD & Up
<div class="button-group--md">
<button type="button" class="button button--white">Button One</button>
<button type="button" class="button button--white">Button Two</button>
<button type="button" class="button button--white">Button Three</button>
<button type="button" class="button button--white">Button Four</button>
<button type="button" class="button button--white">Button Five</button>
<button type="button" class="button button--white">Button Six</button>
</div>
LG & Up
<div class="button-group--lg">
<button type="button" class="button button--white">Button One</button>
<button type="button" class="button button--white">Button Two</button>
<button type="button" class="button button--white">Button Three</button>
<button type="button" class="button button--white">Button Four</button>
<button type="button" class="button button--white">Button Five</button>
<button type="button" class="button button--white">Button Six</button>
<button type="button" class="button button--white">Button Seven</button>
</div>
XL & Up
<div class="button-group--xl">
<button type="button" class="button button--white">Button One</button>
<button type="button" class="button button--white">Button Two</button>
<button type="button" class="button button--white">Button Three</button>
<button type="button" class="button button--white">Button Four</button>
<button type="button" class="button button--white">Button Five</button>
<button type="button" class="button button--white">Button Six</button>
<button type="button" class="button button--white">Button Seven</button>
<button type="button" class="button button--white">Button Eight</button>
</div>
XXL & Up
<div class="button-group--xxl">
<button type="button" class="button button--white">Button One</button>
<button type="button" class="button button--white">Button Two</button>
<button type="button" class="button button--white">Button Three</button>
<button type="button" class="button button--white">Button Four</button>
<button type="button" class="button button--white">Button Five</button>
<button type="button" class="button button--white">Button Six</button>
<button type="button" class="button button--white">Button Seven</button>
<button type="button" class="button button--white">Button Eight</button>
<button type="button" class="button button--white">Button Nine</button>
</div>
Cards
Base
Card title
Card content
<div class="card">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>Colors
Out of the box colors include .card--primary-color, .card--secondary-color, .card--tertiary-color, and .card--inversed.
Create your own branded cards by using the card color mixin: @include card-color($border-color, $background-color, $color, $content-background-color);.
You may also want to custom the link colors inside a card. Use the link mixin: link($link-color, $link-visited-color, $link-hover-color, $link-active-color);.
Primary Color
Card title
Card content
<div class="card card--primary-color">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>Secondary Color
Card title
Card content
<div class="card card--secondary-color">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>Tertiary Color
Card title
Card content
<div class="card card--tertiary-color">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>Inversed
Card title
Card content
<div class="card card--inversed">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>Variations
Card title
Card content
<div class="row">
<div class="col col--xs-12 col--sm-6 col--md-3 col--flex">
<div class="card">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
</div>
<div class="col col--xs-12 col--sm-6 col--md-3 col--flex">
<div class="card">
<div class="card--header">
<img src="http://placehold.it/600x200?text=Card+Image" alt="" />
</div>
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
</div>
</div>
<div class="col col--xs-12 col--sm-6 col--md-3 col--flex">
<div class="card">
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
</div>
<div class="col col--xs-12 col--sm-6 col--md-3 col--flex">
<div class="card">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content">
<img src="http://placehold.it/600x200?text=Card+Image" alt="" />
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
</div>
</div>
</div>Masonry Cards
Wrap a collection of .card elements in a .cards element to create a masonry grid of cards using the CSS column property. Control the number of columns (two, three, or four) through column classes at different breakpoints:
cards-col-2--xxscards-col-2--xscards-col-2--smcards-col-2--mdcards-col-2--lgcards-col-2--xlcards-col-2--xxl
cards-col-3--xxscards-col-3--xscards-col-3--smcards-col-3--mdcards-col-3--lgcards-col-3--xlcards-col-3--xxl
cards-col-4--xxscards-col-4--xscards-col-4--smcards-col-4--mdcards-col-4--lgcards-col-4--xlcards-col-4--xxl
Card title
Card content
Card title
Card content
Card title
Card content
Card title
Card content
Card title
Card content
<div class="cards cards-col-2--xs cards--col-3--md cards--col-4--xl">
<div class="card card--primary-color">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card card--primary-color">
<div class="card--header">
<img src="http://placehold.it/600x200?text=Card+Image" alt="" />
</div>
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
</div>
<div class="card card--primary-color">
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card card--secondary-color">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card card--secondary-color">
<div class="card--header">
<img src="http://placehold.it/600x200?text=Card+Image" alt="" />
</div>
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
</div>
<div class="card card--secondary-color">
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card card--tertiary-color">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card card--tertiary-color">
<div class="card--header">
<img src="http://placehold.it/600x200?text=Card+Image" alt="" />
</div>
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
</div>
<div class="card card--tertiary-color">
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card card--inversed">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card card--inversed">
<div class="card--header">
<img src="http://placehold.it/600x200?text=Card+Image" alt="" />
</div>
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
</div>
<div class="card card--inversed">
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card">
<div class="card--header card--padding">
<h4>Card title</h4>
</div>
<div class="card--content card--padding">
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
<div class="card">
<div class="card--header">
<img src="http://placehold.it/600x200?text=Card+Image" alt="" />
</div>
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
</div>
<div class="card">
<div class="card--content card--padding">
<h4>Card title</h4>
<p>Card content</p>
<p><a href="#">Link</a></p>
</div>
<div class="card--footer card--padding">
<a href="#">Link</a>
</div>
</div>
</div>Dropdowns
Dropdowns require jQuery and the Mercury UI Framework dropdown plugin to work. Note: You will need
to initialize them by calling $().mercuryuiDropdown();.
You can also open and close dropdowns individually via the plugin through actions by targeting the id of the dropdown:
$('#dropdown-base').mercuryuiDropdown('open'); and $('#dropdown-base').mercuryuiDropdown('close');.
Callbacks are provided for beforeOpen, afterOpen, beforeClose, and afterClose. An example for afterOpen would be:
$('#dropdown-base').mercuryuiDropdown('open', { afterOpen: function(){ alert('Dropdown opened!'); } });
Base
<div class="dropdown margin--off">
<button type="button" class="button button--white dropdown--button" id="dropdown-base-button" aria-controls="dropdown-base" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="arrow"></span>
</button>
<div class="dropdown--list" id="dropdown-base" aria-labelledby="dropdown-base-button" aria-expanded="false" aria-hidden="true">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>Colors
<div class="dropdown dropdown--primary-color margin--off">
<button type="button" class="button button--primary-color dropdown--button" id="dropdown-primary-button" aria-controls="dropdown-primary" aria-expanded="false">
Dropdown <span class="arrow"></span>
</button>
<div class="dropdown--list" id="dropdown-primary" aria-labelledby="dropdown-primary-button" aria-expanded="false" aria-hidden="true">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div><div class="dropdown dropdown--secondary-color margin--off">
<button type="button" class="button button--secondary-color dropdown--button" id="dropdown-secondary-button" aria-controls="dropdown-secondary" aria-expanded="false">
Dropdown <span class="arrow"></span>
</button>
<div class="dropdown--list" id="dropdown-secondary" aria-labelledby="dropdown-secondary-button" aria-expanded="false" aria-hidden="true">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div><div class="dropdown dropdown--tertiary-color margin--off">
<button type="button" class="button button--tertiary-color dropdown--button" id="dropdown-tertiary-button" aria-controls="dropdown-tertiary" aria-expanded="false">
Dropdown <span class="arrow"></span>
</button>
<div class="dropdown--list" id="dropdown-tertiary" aria-labelledby="dropdown-tertiary-button" aria-expanded="false" aria-hidden="true">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>Right Aligned
Note: Right aligned dropdowns may extend off of the screen if you're not careful, like the example below. Use the breakpoint classes below for the best results.
<div class="dropdown dropdown--right margin--off">
<button type="button" class="button button--white dropdown--button" id="dropdown-right-button" aria-controls="dropdown-right" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="arrow"></span>
</button>
<div class="dropdown--list" id="dropdown-right" aria-labelledby="dropdown-right-button" aria-expanded="false" aria-hidden="true">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>Right Aligned At Breakpoints
Note: Resize your browser window to see the following dropdowns lists align themselves to the right at different breakpoints.
XXS & Up
<div class="dropdown dropdown--right--xxs margin--off">
<button type="button" class="button button--white dropdown--button" id="dropdown-right-xxs-button" aria-controls="dropdown-right-xxs" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="arrow"></span>
</button>
<div class="dropdown--list id="dropdown-right-xxs" aria-labelledby="dropdown-right-xxs-button" aria-expanded="false" aria-hidden="true"">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>XS & Up
<div class="dropdown dropdown--right--xs margin--off">
<button type="button" class="button button--white dropdown--button" id="dropdown-right-xs-button" aria-controls="dropdown-right-xs" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="arrow"></span>
</button>
<div class="dropdown--list" id="dropdown-right-xs" aria-labelledby="dropdown-right-xs-button" aria-expanded="false" aria-hidden="true">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>SM & Up
<div class="dropdown dropdown--right--sm margin--off">
<button type="button" class="button button--white dropdown--button" id="dropdown-right-sm-button" aria-controls="dropdown-right-sm" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="arrow"></span>
</button>
<div class="dropdown--list" id="dropdown-right-sm" aria-labelledby="dropdown-right-sm-button" aria-expanded="false" aria-hidden="true">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>MD & Up
<div class="dropdown dropdown--right--md margin--off">
<button type="button" class="button button--white dropdown--button" id="dropdown-right-md-button" aria-controls="dropdown-right-md" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="arrow"></span>
</button>
<div class="dropdown--list" id="dropdown-right-md" aria-labelledby="dropdown-right-md-button" aria-expanded="false" aria-hidden="true">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>LG & Up
<div class="dropdown dropdown--right--lg margin--off">
<button type="button" class="button button--white dropdown--button" id="dropdown-right-lg-button" aria-controls="dropdown-right-lg" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="arrow"></span>
</button>
<div class="dropdown--list" id="dropdown-right-lg" aria-labelledby="dropdown-right-lg-button" aria-expanded="false" aria-hidden="true">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>XL & Up
<div class="dropdown dropdown--right--xl margin--off">
<button type="button" class="button button--white dropdown--button" id="dropdown-right-xl-button" aria-controls="dropdown-right-xl" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="arrow"></span>
</button>
<div class="dropdown--list" id="dropdown-right-xl" aria-labelledby="dropdown-right-xl-button" aria-expanded="false" aria-hidden="true">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>XXL & Up
<div class="dropdown dropdown--right--xxl margin--off">
<button type="button" class="button button--white dropdown--button" id="dropdown-right-xxl-button" aria-controls="dropdown-right-xxl" aria-haspopup="true" aria-expanded="false">
Dropdown <span class="arrow"></span>
</button>
<div class="dropdown--list" id="dropdown-right-xxl" aria-labelledby="dropdown-right-xxl-button" aria-expanded="false" aria-hidden="true">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>Grids
Auto Columns
Auto columns using flexbox let the browser decide when and how to configure columns based on the content inside —
just add col col--auto to the element. There is no limit to the number of auto columns you can add.
Use margin--none on the row to turn off row margins, and use margin--off on the row
to turn off columns margins.
100%
<div class="container">
<div class="row">
<div class="col col--auto">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--auto">
50%
</div>
<div class="col col--auto">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--auto">
33%
</div>
<div class="col col--auto">
33%
</div>
<div class="col col--auto">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--auto">
25%
</div>
<div class="col col--auto">
25%
</div>
<div class="col col--auto">
25%
</div>
<div class="col col--auto">
25%
</div>
</div>
</div>Breakpoint Columns
The columns you're used to, from XXS all the way up to XXL. Use margin--none on the row to turn off
row margins, and use margin--off on the row to turn off columns margins.
XXS & Up
100%
<div class="container">
<div class="row">
<div class="col col--xxs-12">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--xxs-6">
50%
</div>
<div class="col col--xxs-6">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--xxs-4">
33%
</div>
<div class="col col--xxs-4">
33%
</div>
<div class="col col--xxs-4">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--xxs-3">
25%
</div>
<div class="col col--xxs-3">
25%
</div>
<div class="col col--xxs-3">
25%
</div>
<div class="col col--xxs-3">
25%
</div>
</div>
</div>XS & Up
100%
<div class="container">
<div class="row">
<div class="col col--xs-12">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--xs-6">
50%
</div>
<div class="col col--xs-6">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--xs-4">
33%
</div>
<div class="col col--xs-4">
33%
</div>
<div class="col col--xs-4">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--xs-3">
25%
</div>
<div class="col col--xs-3">
25%
</div>
<div class="col col--xs-3">
25%
</div>
<div class="col col--xs-3">
25%
</div>
</div>
</div>SM & Up
100%
<div class="container">
<div class="row">
<div class="col col--sm-12">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--sm-6">
50%
</div>
<div class="col col--sm-6">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--sm-4">
33%
</div>
<div class="col col--sm-4">
33%
</div>
<div class="col col--sm-4">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--sm-3">
25%
</div>
<div class="col col--sm-3">
25%
</div>
<div class="col col--sm-3">
25%
</div>
<div class="col col--sm-3">
25%
</div>
</div>
</div>MD & Up
100%
<div class="container">
<div class="row">
<div class="col col--md-12">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--md-6">
50%
</div>
<div class="col col--md-6">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--md-4">
33%
</div>
<div class="col col--md-4">
33%
</div>
<div class="col col--md-4">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--md-3">
25%
</div>
<div class="col col--md-3">
25%
</div>
<div class="col col--md-3">
25%
</div>
<div class="col col--md-3">
25%
</div>
</div>
</div>LG & Up
100%
<div class="container">
<div class="row">
<div class="col col--lg-12">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--lg-6">
50%
</div>
<div class="col col--lg-6">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--lg-4">
33%
</div>
<div class="col col--lg-4">
33%
</div>
<div class="col col--lg-4">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--lg-3">
25%
</div>
<div class="col col--lg-3">
25%
</div>
<div class="col col--lg-3">
25%
</div>
<div class="col col--lg-3">
25%
</div>
</div>
</div>XL & Up
100%
<div class="container">
<div class="row">
<div class="col col--xl-12">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--xl-6">
50%
</div>
<div class="col col--xl-6">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--xl-4">
33%
</div>
<div class="col col--xl-4">
33%
</div>
<div class="col col--xl-4">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--xl-3">
25%
</div>
<div class="col col--xl-3">
25%
</div>
<div class="col col--xl-3">
25%
</div>
<div class="col col--xl-3">
25%
</div>
</div>
</div>XXL & Up
100%
<div class="container">
<div class="row">
<div class="col col--xxl-12">
100%
</div>
</div>
</div>50%
50%
<div class="container">
<div class="row">
<div class="col col--xxl-6">
50%
</div>
<div class="col col--xxl-6">
50%
</div>
</div>
</div>33.3%
33.3%
33.3%
<div class="container">
<div class="row">
<div class="col col--xxl-4">
33%
</div>
<div class="col col--xxl-4">
33%
</div>
<div class="col col--xxl-4">
33%
</div>
</div>
</div>25%
25%
25%
25%
<div class="container">
<div class="row">
<div class="col col--xxl-3">
25%
</div>
<div class="col col--xxl-3">
25%
</div>
<div class="col col--xxl-3">
25%
</div>
<div class="col col--xxl-3">
25%
</div>
</div>
</div>Heroes
Base
<div class="hero">
<img src="~/images/sunshine-skyline-bridge.jpg" alt="Hero Image" />
<div class="hero--overlay hero--overlay-over">
<div class="hero--text hero--text-middle color--white text-align--center">
<div class="hero--text-inner">
<h1>Heading 1</h1>
</div>
</div>
</div>
</div>With More Text
Control when the overlay displays over the hero image through breakpoint classes such as hero--overlay-over--xs. The full range of breakpoints from xxs to xxl are available.
<div class="hero">
<img src="~/images/sunshine-skyline-bridge.jpg" alt="Hero Image" />
<div class="hero--overlay hero--overlay-over--xs">
<div class="hero--text hero--padding hero--text-middle--xs color--white text-align--center">
<div class="hero--text-inner">
<h1>Heading 1</h1>
<p>Some paragraph text.</p>
</div>
</div>
</div>
</div>With Scroll Indicator
If you're hero uses a tall image, be sure to include a scroll indicator to prompt the user to scroll down to consume the rest of the page.
Be sure to use JS to scroll smoothly to the next section, using native browser scrolling, jQuery Smooth Scroll, or vanilla JS Smooth Scroll.
An Example Next Section
Some text.
<div class="hero">
<img src="~/images/sunshine-skyline-bridge.jpg" alt="Hero Image" />
<div class="hero--overlay hero--overlay-over--xs">
<div class="hero--text hero--padding hero--text-middle--xs color--white text-align--center">
<div class="hero--text-inner">
<h1>Heading 1</h1>
<a href="#next" class="hero--next" title="Scroll to the next section"><span class="arrow arrow--larger arrow--white"></span></a>
</div>
</div>
</div>
</div>
<div class="band band--white" id="next">
<div class="inner band--inner">
<h2>An Example Next Section</h2>
<p>Some text.</p>
</div>
</div>Alignment
Top Aligned
<div class="hero">
<img src="~/images/sunshine-skyline-bridge.jpg" alt="Hero Image" />
<div class="hero--overlay hero--overlay-over--xs">
<div class="hero--text hero--padding hero--padding--large--md hero--text-top--xs color--white text-align--center">
<div class="hero--text-inner">
<h1>Heading 1</h1>
</div>
</div>
</div>
</div>Bottom Aligned
<div class="hero">
<img src="~/images/sunshine-skyline-bridge.jpg" alt="Hero Image" />
<div class="hero--overlay hero--overlay-over--xs">
<div class="hero--text hero--padding hero--padding--large--md hero--text-bottom--xs color--white text-align--center">
<div class="hero--text-inner">
<h1>Heading 1</h1>
</div>
</div>
</div>
</div>Inputs
Text
Input text help.
<input type="text" class="input" placeholder="text" />
<p class="input--help">Input text help.</p>
Disabled input text.
<input type="text" class="input" value="text" disabled />
<p class="input--help">Disabled input text.</p>
Input text required.
<input type="text" class="input input-validation-error" placeholder="text" />
<p class="field-validation-error">Input text required.</p>
Search
Input search help.
<input type="search" class="input" placeholder="search" />
<p class="input--help">Input search help.</p>
Disabled input search.
<input type="search" class="input" value="search" disabled />
<p class="input--help">Disabled input search.</p>
Input search required.
<input type="search" class="input input-validation-error" placeholder="search" />
<p class="field-validation-error">Input search required.</p>
Input email help.
<input type="email" class="input" placeholder="email" />
<p class="input--help">Input email help.</p>
Disabled input email.
<input type="email" class="input" value="info@mercurynewmedia.com" disabled />
<p class="input--help">Disabled input email.</p>
Input email required.
<input type="email" class="input input-validation-error" placeholder="email" />
<p class="field-validation-error">Input email required.</p>
URL
Input url help.
<input type="url" class="input" placeholder="url" />
<p class="input--help">Input url help.</p>
Disabled input url.
<input type="url" class="input" value="http://www.mercurynewmedia.com" disabled />
<p class="input--help">Disabled input url.</p>
Input url required.
<input type="url" class="input input-validation-error" placeholder="url" />
<p class="field-validation-error">Input url required.</p>
Tel
Input tel help.
<input type="tel" class="input" placeholder="tel" />
<p class="input--help">Input tel help.</p>
Disabled input tel.
<input type="tel" class="input" value="tel" disabled />
<p class="input--help">Disabled input tel.</p>
Input tel required.
<input type="tel" class="input input-validation-error" placeholder="tel" />
<p class="field-validation-error">Input tel required.</p>
Password
Input password help.
<input type="password" class="input" placeholder="password" />
<p class="input--help">Input password help.</p>
Disabled input password.
<input type="password" class="input" value="password" disabled />
<p class="input--help">Disabled input password.</p>
Input password required.
<input type="password" class="input input-validation-error" placeholder="password" />
<p class="field-validation-error">Input password required.</p>
Number
Input number help.
<input type="number" class="input" placeholder="number" />
<p class="input--help">Input number help.</p>
Disabled input number.
<input type="number" class="input" value="1" disabled />
<p class="input--help">Disabled input number.</p>
Input number required.
<input type="number" class="input input-validation-error" placeholder="number" />
<p class="field-validation-error">Input number required.</p>
Datetime
Input datetime-local help.
<input type="datetime-local" class="input" />
<p class="input--help">Input datetime-local help.</p>
Disabled input datetime-local.
<input type="datetime-local" class="input" disabled />
<p class="input--help">Disabled input datetime-local.</p>
Input datetime-local required.
<input type="datetime-local" class="input input-validation-error" />
<p class="field-validation-error">Input datetime-local required.</p>
Date
Input date help.
<input type="date" class="input" />
<p class="input--help">Input date help.</p>
Disabled input date.
<input type="date" class="input" disabled />
<p class="input--help">Disabled input date.</p>
Input date required.
<input type="date" class="input input-validation-error" />
<p class="field-validation-error">Input date required.</p>
Month
Input month help.
<input type="month" class="input" />
<p class="input--help">Input month help.</p>
Disabled input month.
<input type="month" class="input" disabled />
<p class="input--help">Disabled input month.</p>
Input month required.
<input type="month" class="input input-validation-error" />
<p class="field-validation-error">Input month required.</p>
Week
Input week help.
<input type="week" class="input" />
<p class="input--help">Input week help.</p>
Disabled input week.
<input type="week" class="input" disabled />
<p class="input--help">Disabled input week.</p>
Input week required.
<input type="week" class="input input-validation-error" />
<p class="field-validation-error">Input week required.</p>
Time
Input time help.
<input type="time" class="input" />
<p class="input--help">Input time help.</p>
Disabled input time.
<input type="time" class="input" disabled />
<p class="input--help">Disabled input time.</p>
Input time required.
<input type="time" class="input input-validation-error" />
<p class="field-validation-error">Input time required.</p>
Color
Input color help.
<input type="color" class="input" />
<p class="input--help">Input color help.</p>
Disabled input color.
<input type="color" class="input" disabled />
<p class="input--help">Disabled input color.</p>
Input color required.
<input type="color" class="input input-validation-error" />
<p class="field-validation-error">Input color required.</p>
Textarea
Textarea help.
<textarea class="input" placeholder="textarea"></textarea>
<p class="input--help">Textarea help.</p>Disabled textarea.
<textarea class="input" placeholder="textarea" disabled></textarea>
<p class="input--help">Disabled textarea.</p>Textarea required.
<textarea class="input input-validation-error" placeholder="textarea"></textarea>
<p class="field-validation-error">Textarea required.</p>Select
Select input help.
<select class="input">
<option value="">Select an option...</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</select>Disabled select input.
<select class="input" disabled>
<option value="">Select an option...</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</select>Select input required.
<select class="input input-validation-error">
<option value="">Select an option...</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</select>Multiselect
Multiselect help.
<select multiple class="input">
<option value="">Select an option...</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</select>Disabled multiselect.
<select multiple class="input" disabled>
<option value="">Select an option...</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</select>Multiselect required.
<select multiple class="input input-validation-error">
<option value="">Select an option...</option>
<option value="">Option 1</option>
<option value="">Option 2</option>
<option value="">Option 3</option>
</select>Checkboxes
Base
<div class="checkboxes">
<label class="checkbox--label">
<input type="checkbox" class="checkbox" /> Checkbox
</label>
</div>Disabled
<div class="checkboxes">
<label class="checkbox--label disabled">
<input type="checkbox" class="checkbox" disabled /> Checkbox
</label>
</div>Horizontal Checkboxes
<div class="checkboxes">
<label class="checkbox--label">
<input type="checkbox" class="checkbox" /> Checkbox
</label>
<label class="checkbox--label">
<input type="checkbox" class="checkbox" /> Checkbox
</label>
<label class="checkbox--label">
<input type="checkbox" class="checkbox" /> Checkbox
</label>
</div>Vertical Checkboxes
<div class="checkboxes checkboxes--list">
<label class="checkbox--label">
<input type="checkbox" class="checkbox" /> Checkbox
</label>
<label class="checkbox--label">
<input type="checkbox" class="checkbox" /> Checkbox
</label>
<label class="checkbox--label">
<input type="checkbox" class="checkbox" /> Checkbox
</label>
</div>Radios
Base
<div class="radios">
<label class="radio--label">
<input type="radio" class="radio" name="radio-example-1" checked /> Radio
</label>
<label class="radio--label">
<input type="radio" class="radio" name="radio-example-1" /> Radio
</label>
</div>Disabled
<div class="radios">
<label class="radio--label disabled">
<input type="radio" class="radio" name="radio-example-2" checked disabled /> Radio
</label>
<label class="radio--label disabled">
<input type="radio" class="radio" name="radio-example-2" disabled /> Radio
</label>
</div>Horizontal Radios
<div class="radios">
<label class="radio--label">
<input type="radio" class="radio" name="radio-example-3" checked /> Radio
</label>
<label class="radio--label">
<input type="radio" class="radio" name="radio-example-3" /> Radio
</label>
<label class="radio--label">
<input type="radio" class="radio" name="radio-example-3" /> Radio
</label>
</div>Vertical Radios
<div class="radios radios--list">
<label class="radio--label">
<input type="radio" class="radio" name="radio-example-4" checked /> Radio
</label>
<label class="radio--label">
<input type="radio" class="radio" name="radio-example-4" /> Radio
</label>
<label class="radio--label">
<input type="radio" class="radio" name="radio-example-4" /> Radio
</label>
</div>Input Groups
Base
An input group will always display as an input group at all breakpoints.
<div class="input-group margin--off">
<div class="input-group--input">
<input type="search" class="input" placeholder="Search..." />
</div>
<div class="input-group--action">
<button type="button" class="button button--primary-color button--block">Search</button>
</div>
</div>Breakpoints
Inputs and buttons will become input groups at the starting at the breakpoints below.
XXS & Up
<div class="input-group--xxs margin--off--xxs">
<div class="input-group--input">
<input type="search" class="input" placeholder="Search..." />
</div>
<div class="input-group--action">
<button type="button" class="button button--primary-color button--block--xxs">Search</button>
</div>
</div>XS & Up
<div class="input-group--xs margin--off--xs">
<div class="input-group--input">
<input type="search" class="input" placeholder="Search..." />
</div>
<div class="input-group--action">
<button type="button" class="button button--primary-color button--block--xs">Search</button>
</div>
</div>SM & Up
<div class="input-group--sm margin--off--sm">
<div class="input-group--input">
<input type="search" class="input" placeholder="Search..." />
</div>
<div class="input-group--action">
<button type="button" class="button button--primary-color button--block--sm">Search</button>
</div>
</div>MD & Up
<div class="input-group--md margin--off--md">
<div class="input-group--input">
<input type="search" class="input" placeholder="Search..." />
</div>
<div class="input-group--action">
<button type="button" class="button button--primary-color button--block--md">Search</button>
</div>
</div>LG & Up
<div class="input-group--lg margin--off--lg">
<div class="input-group--input">
<input type="search" class="input" placeholder="Search..." />
</div>
<div class="input-group--action">
<button type="button" class="button button--primary-color button--block--lg">Search</button>
</div>
</div>XL & Up
<div class="input-group--xl margin--off--xl">
<div class="input-group--input">
<input type="search" class="input" placeholder="Search..." />
</div>
<div class="input-group--action">
<button type="button" class="button button--primary-color button--block--xl">Search</button>
</div>
</div>XXL & Up
<div class="input-group--xxl margin--off--xxl">
<div class="input-group--input">
<input type="search" class="input" placeholder="Search..." />
</div>
<div class="input-group--action">
<button type="button" class="button button--primary-color button--block--xxl">Search</button>
</div>
</div>Icons
Left
<div class="input-group margin--off">
<div class="input-group--action input-group--action-icon">
<span class="input-group--icon">$</span>
</div>
<div class="input-group--input">
<input type="text" class="input" placeholder="Amount" />
</div>
</div>Right
<div class="input-group margin--off">
<div class="input-group--input">
<input type="text" class="input" placeholder="Weight" />
</div>
<div class="input-group--action input-group--action-icon">
<span class="input-group--icon">Lbs.</span>
</div>
</div>Mega Menus
Mega menus are meant to be used in conjunction with off canvas menu and require jQuery and the Mercury UI Framework mega menu plugin to work. Note: You will need
to initialize your mega menus by calling $().mercuryuiMegaMenu(); and off canvas menus by calling $().mercuryuiOffCanvas();.
You can also open and close mega menus individually via the plugin through actions by targeting the id of the menu:
$('#mega-menu-base-1').mercuryuiMegaMenu('open'); and $('#mega-menu-base-1').mercuryuiMegaMenu('close');.
Callbacks are provided for beforeOpen, afterOpen, beforeClose, and afterClose. An example for afterOpen would be:
$('#mega-menu-base-1').mercuryuiMegaMenu('open', { afterOpen: function(){ alert('Menu opened!'); } });
Create custom branded mega menu by using the mega menu color mixin: @include mega-menu-color($color, $hover-color, $background-color, $border-color).
Base
The base Mega Menu starts at the md breakpoint.
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--md mega-menu--md margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--base">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--base">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--base">Close</button>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-base-1-button" aria-controls="mega-menu-base-1" aria-expanded="false" aria-haspopup="true">
Mega Menu One
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-base-1" aria-labelledby="mega-menu-base-1-button" aria-expanded="false" aria-hidden="true">
<div class="row">
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Child One</a></li>
<li><a href="#">Link One Child Two</a></li>
<li><a href="#">Link One Child Three</a></li>
<li><a href="#">Link One Child Four</a></li>
<li><a href="#">Link One Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-base-2-button" aria-controls="mega-menu-base-2" aria-expanded="false" aria-haspopup="true">
Mega Menu Two
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-base-2" aria-labelledby="mega-menu-base-2-button" aria-expanded="false" aria-hidden="true">
<div class="row margin--off--sm">
<div class="col col--md-4">
<h2><a href="#">Link Two</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Child One</a></li>
<li><a href="#">Link Two Child Two</a></li>
<li><a href="#">Link Two Child Three</a></li>
<li><a href="#">Link Two Child Four</a></li>
<li><a href="#">Link Two Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>Colors
Primary Color
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--md mega-menu--md mega-menu--primary-color margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--primary">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--primary">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--primary">Close</button>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-primary-1-button" aria-controls="mega-menu-primary-1" aria-expanded="false" aria-haspopup="true">
Mega Menu One
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-primary-1" aria-labelledby="mega-menu-primary-1-button" aria-expanded="false" aria-hidden="true">
<div class="row">
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Child One</a></li>
<li><a href="#">Link One Child Two</a></li>
<li><a href="#">Link One Child Three</a></li>
<li><a href="#">Link One Child Four</a></li>
<li><a href="#">Link One Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-primary-2-button" aria-controls="mega-menu-primary-2" aria-expanded="false" aria-haspopup="true">
Mega Menu Two
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-primary-2" aria-labelledby="mega-menu-primary-2-button" aria-expanded="false" aria-hidden="true">
<div class="row margin--off--sm">
<div class="col col--md-4">
<h2><a href="#">Link Two</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Child One</a></li>
<li><a href="#">Link Two Child Two</a></li>
<li><a href="#">Link Two Child Three</a></li>
<li><a href="#">Link Two Child Four</a></li>
<li><a href="#">Link Two Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>Secondary
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--md mega-menu--md mega-menu--secondary-color margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--secondary">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--secondary">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--secondary">Close</button>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-secondary-1-button" aria-controls="mega-menu-secondary-1" aria-expanded="false" aria-haspopup="true">
Mega Menu One
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-secondary-1" aria-labelledby="mega-menu-secondary-1-button" aria-expanded="false" aria-hidden="true">
<div class="row">
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Child One</a></li>
<li><a href="#">Link One Child Two</a></li>
<li><a href="#">Link One Child Three</a></li>
<li><a href="#">Link One Child Four</a></li>
<li><a href="#">Link One Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-secondary-2-button" aria-controls="mega-menu-secondary-2" aria-expanded="false" aria-haspopup="true">
Mega Menu Two
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-secondary-2" aria-labelledby="mega-menu-secondary-2-button" aria-expanded="false" aria-hidden="true">
<div class="row margin--off--sm">
<div class="col col--md-4">
<h2><a href="#">Link Two</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Child One</a></li>
<li><a href="#">Link Two Child Two</a></li>
<li><a href="#">Link Two Child Three</a></li>
<li><a href="#">Link Two Child Four</a></li>
<li><a href="#">Link Two Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>Tertiary
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--md mega-menu--md mega-menu--tertiary-color margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--tertiary">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--tertiary">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--tertiary">Close</button>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-tertiary-1-button" aria-controls="mega-menu-tertiary-1" aria-expanded="false" aria-haspopup="true">
Mega Menu One
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-tertiary-1" aria-labelledby="mega-menu-tertiary-1-button" aria-expanded="false" aria-hidden="true">
<div class="row">
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Child One</a></li>
<li><a href="#">Link One Child Two</a></li>
<li><a href="#">Link One Child Three</a></li>
<li><a href="#">Link One Child Four</a></li>
<li><a href="#">Link One Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4 margin--none--md">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-tertiary-2-button" aria-controls="mega-menu-tertiary-2" aria-expanded="false" aria-haspopup="true">
Mega Menu Two
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-tertiary-2" aria-labelledby="mega-menu-tertiary-2-button" aria-expanded="false" aria-hidden="true">
<div class="row margin--off--sm">
<div class="col col--md-4">
<h2><a href="#">Link Two</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Child One</a></li>
<li><a href="#">Link Two Child Two</a></li>
<li><a href="#">Link Two Child Three</a></li>
<li><a href="#">Link Two Child Four</a></li>
<li><a href="#">Link Two Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--md-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>Breakpoints
Breakpoints are available to turn Off Canvas menus into Mega Menus at md, lg, xl, and xxl.
LG & Up
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--lg mega-menu--lg margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--lg">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--lg">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--lg">Close</button>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-lg-1-button" aria-controls="mega-menu-lg-1" aria-expanded="false" aria-haspopup="true">
Mega Menu One
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-lg-1" aria-labelledby="mega-menu-lg-1-button" aria-expanded="false" aria-hidden="true">
<div class="row">
<div class="col col--lg-4 margin--none--lg">
<h2><a href="#">Link One</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Child One</a></li>
<li><a href="#">Link One Child Two</a></li>
<li><a href="#">Link One Child Three</a></li>
<li><a href="#">Link One Child Four</a></li>
<li><a href="#">Link One Child Five</a></li>
</ul>
</div>
<div class="col col--lg-4 margin--none--lg">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--lg-4 margin--none--lg">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-lg-2-button" aria-controls="mega-menu-lg-2" aria-expanded="false" aria-haspopup="true">
Mega Menu Two
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-lg-2" aria-labelledby="mega-menu-lg-2-button" aria-expanded="false" aria-hidden="true">
<div class="row margin--off--sm">
<div class="col col--lg-4">
<h2><a href="#">Link Two</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Child One</a></li>
<li><a href="#">Link Two Child Two</a></li>
<li><a href="#">Link Two Child Three</a></li>
<li><a href="#">Link Two Child Four</a></li>
<li><a href="#">Link Two Child Five</a></li>
</ul>
</div>
<div class="col col--lg-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--lg-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>XL & Up
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--xl mega-menu--xl margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--xl">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--xl">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--xl">Close</button>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-xl-1-button" aria-controls="mega-menu-xl-1" aria-expanded="false" aria-haspopup="true">
Mega Menu One
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-xl-1" aria-labelledby="mega-menu-xl-1-button" aria-expanded="false" aria-hidden="true">
<div class="row">
<div class="col col--xl-4 margin--none--xl">
<h2><a href="#">Link One</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Child One</a></li>
<li><a href="#">Link One Child Two</a></li>
<li><a href="#">Link One Child Three</a></li>
<li><a href="#">Link One Child Four</a></li>
<li><a href="#">Link One Child Five</a></li>
</ul>
</div>
<div class="col col--xl-4 margin--none--xl">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--xl-4 margin--none--xl">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-xl-2-button" aria-controls="mega-menu-xl-2" aria-expanded="false" aria-haspopup="true">
Mega Menu Two
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-xl-2" aria-labelledby="mega-menu-xl-2-button" aria-expanded="false" aria-hidden="true">
<div class="row margin--off--sm">
<div class="col col--xl-4">
<h2><a href="#">Link Two</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Child One</a></li>
<li><a href="#">Link Two Child Two</a></li>
<li><a href="#">Link Two Child Three</a></li>
<li><a href="#">Link Two Child Four</a></li>
<li><a href="#">Link Two Child Five</a></li>
</ul>
</div>
<div class="col col--xl-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--xl-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>XXL & Up
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--xxl mega-menu--xxl margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--xxl">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--xxl">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--xxl">Close</button>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-xxl-1-button" aria-controls="mega-menu-xxl-1" aria-expanded="false" aria-haspopup="true">
Mega Menu One
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-xxl-1" aria-labelledby="mega-menu-xxl-1-button" aria-expanded="false" aria-hidden="true">
<div class="row">
<div class="col col--xxl-4 margin--none--xxl">
<h2><a href="#">Link One</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Child One</a></li>
<li><a href="#">Link One Child Two</a></li>
<li><a href="#">Link One Child Three</a></li>
<li><a href="#">Link One Child Four</a></li>
<li><a href="#">Link One Child Five</a></li>
</ul>
</div>
<div class="col col--xxl-4 margin--none--xxl">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--xxl-4 margin--none--xxl">
<h2><a href="#">Link One Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link One Sibling Child One</a></li>
<li><a href="#">Link One Sibling Child Two</a></li>
<li><a href="#">Link One Sibling Child Three</a></li>
<li><a href="#">Link One Sibling Child Four</a></li>
<li><a href="#">Link One Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="mega-menu--dropdown">
<button type="button" class="button mega-menu--button" id="mega-menu-xxl-2-button" aria-controls="mega-menu-xxl-2" aria-expanded="false" aria-haspopup="true">
Mega Menu Two
<span class="arrow"></span>
</button>
<div class="mega-menu--dropdown-container" id="mega-menu-xxl-2" aria-labelledby="mega-menu-xxl-2-button" aria-expanded="false" aria-hidden="true">
<div class="row margin--off--sm">
<div class="col col--xxl-4">
<h2><a href="#">Link Two</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Child One</a></li>
<li><a href="#">Link Two Child Two</a></li>
<li><a href="#">Link Two Child Three</a></li>
<li><a href="#">Link Two Child Four</a></li>
<li><a href="#">Link Two Child Five</a></li>
</ul>
</div>
<div class="col col--xxl-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
<div class="col col--xxl-4">
<h2><a href="#">Link Two Sibling</a></h2>
<ul class="list-style--none">
<li><a href="#">Link Two Sibling Child One</a></li>
<li><a href="#">Link Two Sibling Child Two</a></li>
<li><a href="#">Link Two Sibling Child Three</a></li>
<li><a href="#">Link Two Sibling Child Four</a></li>
<li><a href="#">Link Two Sibling Child Five</a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</nav>
</div>
</header>Modals
Modals require jQuery and the Mercury UI Framework modal plugin to work. Note: You will need to initialize them by calling $().mercuryuiModal();.
You can also open and close modals via the plugin through actions by targeting the id of the modal: $('#example-modal').mercuryuiModal('open'); and $('#example-modal').mercuryuiModal('close');.
Callbacks are provided for beforeOpen, afterOpen, beforeClose, and afterClose. An example for afterOpen would be: $('#example-modal').mercuryuiModal('open', { afterOpen: function(){ alert('Modal opened!'); } });
Create custom branded modals by using the modal color mixin: @include modal-color($background-color, $title-color).
Base
<button type="button" class="button button--white open-modal" aria-controls="example-modal">
Example Modal
</button>
<div class="modal" id="example-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content margin--off">
<div class="modal--header">
<h4 aria-labelledby="example-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a standard modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>Sizes
<button type="button" class="button button--white open-modal" aria-controls="example-small-modal">
Small Modal
</button>
<div class="modal" id="example-small-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content modal--content--small margin--off">
<div class="modal--header">
<h4 aria-labelledby="example-small-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a small modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div><button type="button" class="button button--white open-modal" aria-controls="example-smaller-modal">
Smaller Modal
</button>
<div class="modal" id="example-smaller-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content modal--content--smaller margin--off">
<div class="modal--header">
<h4 aria-labelledby="example-smaller-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a smaller modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div><button type="button" class="button button--white open-modal" aria-controls="example-smallest-modal">
Smallest Modal
</button>
<div class="modal" id="example-smallest-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content modal--content--smallest margin--off">
<div class="modal--header">
<h4 aria-labelledby="example-smallest-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is the smallest modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div><button type="button" class="button button--white open-modal" aria-controls="example-large-modal">
Large Modal
</button>
<div class="modal" id="example-large-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content modal--content--large margin--off">
<div class="modal--header">
<h4 aria-labelledby="example-large-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a large modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div><button type="button" class="button button--white open-modal" aria-controls="example-larger-modal">
Larger Modal
</button>
<div class="modal" id="example-larger-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content modal--content--larger margin--off">
<div class="modal--header">
<h4 aria-labelledby="example-larger-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a larger modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div><button type="button" class="button button--white open-modal" aria-controls="example-largest-modal">
Largest Modal
</button>
<div class="modal" id="example-largest-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content modal--content--largest margin--off">
<div class="modal--header">
<h4 aria-labelledby="example-largest-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is the largest modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>Colors
<button type="button" class="button button--primary-color open-modal" aria-controls="primary-color-modal">
Primary Color Modal
</button>
<div class="modal modal--primary-color" id="primary-color-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content margin--off">
<div class="modal--header">
<h4 aria-labelledby="primary-color-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a primary color modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div><button type="button" class="button button--secondary-color open-modal" aria-controls="secondary-color-modal">
Secondary Color Modal
</button>
<div class="modal modal--secondary-color" id="secondary-color-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content margin--off">
<div class="modal--header">
<h4 aria-labelledby="secondary-color-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a secondary color modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--primary-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div><button type="button" class="button button--tertiary-color open-modal" aria-controls="tertiary-color-modal">
Tertiary Color Modal
</button>
<div class="modal modal--tertiary-color" id="tertiary-color-modal" tabindex="-1" role="dialog" aria-hidden="true">
<div class="inner modal--inner">
<div class="modal--centered">
<div class="modal--centered-inner">
<div class="modal--content margin--off">
<div class="modal--header">
<h4 aria-labelledby="tertiary-color-modal">Standard Modal</h4>
</div>
<div class="modal--body">
<p>This is a tertiary color modal.</p>
</div>
<div class="modal--footer margin--off">
<button type="button" class="button button--success-color close-modal">Save</button>
<button type="button" class="button button--white close-modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</div>Off Canvas
Off canva menus require jQuery and the Mercury UI Framework off canvas plugin to work. Note: You will need
to initialize them by calling $().mercuryuiOffCanvas();.
You can also open and close menus individually via the plugin through actions by targeting the id of the menu:
$('#off-canvas--menu--xxs').mercuryuiOffCanvas('open'); and $('#off-canvas--menu--xxs').mercuryuiOffCanvas('close');.
Callbacks are provided for beforeOpen, afterOpen, beforeClose, and afterClose. An example for afterOpen would be:
$('#off-canvas--menu--xxs').mercuryuiOffCanvas('open', { afterOpen: function(){ alert('Menu opened!'); } });
Note: Resize your browser to see off canvas menus in action at different breakpoints.
From Right To Left
Up To XXS
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--xxs margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu--xxs">Menu</button>
<div class="off-canvas--menu" id="off-canvas--menu--xxs">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu--xxs">Close</button>
<a href="#" class="off-canvas--link">Link One</a>
<a href="#" class="off-canvas--link">Link Two</a>
</div>
</nav>
</div>
</header>Up To XS
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--xs margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-right-xs">
Menu
</button>
<div class="off-canvas--menu" id="off-canvas--menu-right-xs">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-right-xs">
Close
</button>
<a href="#" class="off-canvas--link">Link One</a>
<a href="#" class="off-canvas--link">Link Two</a>
<a href="#" class="off-canvas--link">Link Three</a>
</div>
</nav>
</div>
</header>Up To SM
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--sm margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-right-sm">
Menu
</button>
<div class="off-canvas--menu" id="off-canvas--menu-right-sm">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-right-sm">
Close
</button>
<a href="#" class="off-canvas--link">Link One</a>
<a href="#" class="off-canvas--link">Link Two</a>
<a href="#" class="off-canvas--link">Link Three</a>
<a href="#" class="off-canvas--link">Link Four</a>
<a href="#" class="off-canvas--link">Link Five</a>
</div>
</nav>
</div>
</header>Up To MD
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--md margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-right-md">
Menu
</button>
<div class="off-canvas--menu" id="off-canvas--menu-right-md">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-right-md">
Close
</button>
<a href="#" class="off-canvas--link">Link One</a>
<a href="#" class="off-canvas--link">Link Two</a>
<a href="#" class="off-canvas--link">Link Three</a>
<a href="#" class="off-canvas--link">Link Four</a>
<a href="#" class="off-canvas--link">Link Five</a>
<a href="#" class="off-canvas--link">Link Six</a>
</div>
</nav>
</div>
</header>Up To LG
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--lg margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-right-lg">
Menu
</button>
<div class="off-canvas--menu" id="off-canvas--menu-right-lg">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-right-lg">
Close
</button>
<a href="#" class="off-canvas--link">Link One</a>
<a href="#" class="off-canvas--link">Link Two</a>
<a href="#" class="off-canvas--link">Link Three</a>
<a href="#" class="off-canvas--link">Link Four</a>
<a href="#" class="off-canvas--link">Link Five</a>
<a href="#" class="off-canvas--link">Link Six</a>
<a href="#" class="off-canvas--link">Link Seven</a>
<a href="#" class="off-canvas--link">Link Eight</a>
<a href="#" class="off-canvas--link">Link Nine</a>
</div>
</nav>
</div>
</header>Up To XL
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--xl margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-right-xl">
Menu
</button>
<div class="off-canvas--menu" id="off-canvas--menu-right-xl">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-right-xl">
Close
</button>
<a href="#" class="off-canvas--link">Link One</a>
<a href="#" class="off-canvas--link">Link Two</a>
<a href="#" class="off-canvas--link">Link Three</a>
<a href="#" class="off-canvas--link">Link Four</a>
<a href="#" class="off-canvas--link">Link Five</a>
<a href="#" class="off-canvas--link">Link Six</a>
<a href="#" class="off-canvas--link">Link Seven</a>
<a href="#" class="off-canvas--link">Link Eight</a>
<a href="#" class="off-canvas--link">Link Nine</a>
<a href="#" class="off-canvas--link">Link Ten</a>
</div>
</nav>
</div>
</header>Up To XXL
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--right off-canvas--off--xxl margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-right-xxl">
Menu
</button>
<div class="off-canvas--menu" id="off-canvas--menu-right-xxl">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-right-xxl">
Close
</button>
<a href="#" class="off-canvas--link">Link One</a>
<a href="#" class="off-canvas--link">Link Two</a>
<a href="#" class="off-canvas--link">Link Three</a>
<a href="#" class="off-canvas--link">Link Four</a>
<a href="#" class="off-canvas--link">Link Five</a>
<a href="#" class="off-canvas--link">Link Six</a>
<a href="#" class="off-canvas--link">Link Seven</a>
<a href="#" class="off-canvas--link">Link Eight</a>
<a href="#" class="off-canvas--link">Link Nine</a>
<a href="#" class="off-canvas--link">Link Ten</a>
<a href="#" class="off-canvas--link">Link Eleven</a>
<a href="#" class="off-canvas--link">Link Twelve</a>
</div>
</nav>
</div>
</header>From Left To Right
Up To XXS
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--left off-canvas--off--xxs margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-left-xxs">
Menu
</button>
<div class="off-canvas--menu" id="off-canvas--menu-left-xxs">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-left-xxs">
Close
</button>
<a href="#" class="off-canvas--link">Link One</a>
<a href="#" class="off-canvas--link">Link Two</a>
</div>
</nav>
</div>
</header>Up To XS
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--left off-canvas--off--xs margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-left-xs">
Menu
</button>
<div class="off-canvas--menu" id="off-canvas--menu-left-xs">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-left-xs">
Close
</button>
<a href="#" class="off-canvas--link">Link One</a>
<a href="#" class="off-canvas--link">Link Two</a>
<a href="#" class="off-canvas--link">Link Three</a>
</div>
</nav>
</div>
</header>Up To SM
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--left off-canvas--off--sm margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-left-sm">
Menu
</button>
<div class="off-canvas--menu" id="off-canvas--menu-left-sm">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-left-sm">
Close
</button>
<a href="#" class="off-canvas--link">Link One</a>
<a href="#" class="off-canvas--link">Link Two</a>
<a href="#" class="off-canvas--link">Link Three</a>
<a href="#" class="off-canvas--link">Link Four</a>
<a href="#" class="off-canvas--link">Link Five</a>
</div>
</nav>
</div>
</header>Up To MD
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--left off-canvas--off--md margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-left-md">
Menu
</button>
<div class="off-canvas--menu" id="off-canvas--menu-left-md">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-left-md">
Close
</button>
<a href="#" class="off-canvas--link">Link One</a>
<a href="#" class="off-canvas--link">Link Two</a>
<a href="#" class="off-canvas--link">Link Three</a>
<a href="#" class="off-canvas--link">Link Four</a>
<a href="#" class="off-canvas--link">Link Five</a>
<a href="#" class="off-canvas--link">Link Six</a>
</div>
</nav>
</div>
</header>Up To LG
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--left off-canvas--off--lg margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-left-lg">
Menu
</button>
<div class="off-canvas--menu" id="off-canvas--menu-left-lg">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-left-lg">
Close
</button>
<a href="#" class="off-canvas--link">Link One</a>
<a href="#" class="off-canvas--link">Link Two</a>
<a href="#" class="off-canvas--link">Link Three</a>
<a href="#" class="off-canvas--link">Link Four</a>
<a href="#" class="off-canvas--link">Link Five</a>
<a href="#" class="off-canvas--link">Link Six</a>
<a href="#" class="off-canvas--link">Link Seven</a>
<a href="#" class="off-canvas--link">Link Eight</a>
<a href="#" class="off-canvas--link">Link Nine</a>
</div>
</nav>
</div>
</header>Up To XL
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--left off-canvas--off--xl margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-left-xl">
Menu
</button>
<div class="off-canvas--menu" id="off-canvas--menu-left-xl">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-left-xl">
Close
</button>
<a href="#" class="off-canvas--link">Link One</a>
<a href="#" class="off-canvas--link">Link Two</a>
<a href="#" class="off-canvas--link">Link Three</a>
<a href="#" class="off-canvas--link">Link Four</a>
<a href="#" class="off-canvas--link">Link Five</a>
<a href="#" class="off-canvas--link">Link Six</a>
<a href="#" class="off-canvas--link">Link Seven</a>
<a href="#" class="off-canvas--link">Link Eight</a>
<a href="#" class="off-canvas--link">Link Nine</a>
<a href="#" class="off-canvas--link">Link Ten</a>
</div>
</nav>
</div>
</header>Up To XXL
<header class="header style-guide--header">
<div class="inner header--inner">
<div class="logo">
<a href="/" class="logo--link">
<img src="~/images/mercury-works-logo.svg" class="logo--image" alt="Logo">
</a>
</div>
<nav class="off-canvas off-canvas--direction--left off-canvas--off--xxl margin--off">
<button type="button" class="button button--white button--small off-canvas--open-button off-canvas--open" aria-controls="off-canvas--menu-left-xxl">
Menu
</button>
<div class="off-canvas--menu" id="off-canvas--menu-left-xxl">
<button type="button" class="button button--white off-canvas--close-button off-canvas--close" aria-controls="off-canvas--menu-left-xxl">
Close
</button>
<a href="#" class="off-canvas--link">Link One</a>
<a href="#" class="off-canvas--link">Link Two</a>
<a href="#" class="off-canvas--link">Link Three</a>
<a href="#" class="off-canvas--link">Link Four</a>
<a href="#" class="off-canvas--link">Link Five</a>
<a href="#" class="off-canvas--link">Link Six</a>
<a href="#" class="off-canvas--link">Link Seven</a>
<a href="#" class="off-canvas--link">Link Eight</a>
<a href="#" class="off-canvas--link">Link Nine</a>
<a href="#" class="off-canvas--link">Link Ten</a>
<a href="#" class="off-canvas--link">Link Eleven</a>
<a href="#" class="off-canvas--link">Link Twelve</a>
</div>
</nav>
</div>
</header>Pagination
Create custom branded pagination by using the pagination color mixin: @include pagination-color($color, $border-color, $background-color).
Note: The page-is-disabled CSS class on the pagination--list-item includes the pointer-events: none CSS declaration which disables the click event but not keyboard events. You may still want to disable the link via JS.
Base
<div class="pagination">
<ul class="pagination--list">
<li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">First</a></li>
<li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">Prev</a></li>
<li class="pagination--list-item page-is-current"><a href="#" class="pagination--link">1</a></li>
<li class="pagination--list-item"><a href="#" class="pagination--link">Next</a></li>
<li class="pagination--list-item"><a href="#" class="pagination--link">Last</a></li>
</ul>
</div>Colors
Primary Color
<div class="pagination pagination--primary-color">
<ul class="pagination--list">
<li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">First</a></li>
<li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">Prev</a></li>
<li class="pagination--list-item page-is-current"><a href="#" class="pagination--link">1</a></li>
<li class="pagination--list-item"><a href="#" class="pagination--link">Next</a></li>
<li class="pagination--list-item"><a href="#" class="pagination--link">Last</a></li>
</ul>
</div>Secondary Color
<div class="pagination pagination--secondary-color">
<ul class="pagination--list">
<li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">First</a></li>
<li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">Prev</a></li>
<li class="pagination--list-item page-is-current"><a href="#" class="pagination--link">1</a></li>
<li class="pagination--list-item"><a href="#" class="pagination--link">Next</a></li>
<li class="pagination--list-item"><a href="#" class="pagination--link">Last</a></li>
</ul>
</div>Tertiary Color
<div class="pagination pagination--tertiary-color">
<ul class="pagination--list">
<li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">First</a></li>
<li class="pagination--list-item page-is-disabled"><a href="#" class="pagination--link">Prev</a></li>
<li class="pagination--list-item page-is-current"><a href="#" class="pagination--link">1</a></li>
<li class="pagination--list-item"><a href="#" class="pagination--link">Next</a></li>
<li class="pagination--list-item"><a href="#" class="pagination--link">Last</a></li>
</ul>,
</div>Breakpoints
Resize your browser to show and hide pagination links at different breakpoints. The number of links you can show at different breakpoints is:
- Base: 1
- XXS: 2
- XS: 3
- SM: 8
- MD: 12
- LG: 15
- XL: 20
- XXL: 25
<ul class="pagination--list">
<li class="pagination--list-item page--first page-is-disabled"><a href="#" class="pagination--link"><span class="arrow arrow--left"></span><span class="arrow arrow--left"></span> <span class="sr-only">First</span></a></li>
<li class="pagination--list-item page--prev page-is-disabled"><a href="#" class="pagination--link"><span class="arrow arrow--left"></span> <span class="sr-only">Prev</span></a></li>
<li class="pagination--list-item page-is-current"><a href="#" class="pagination--link">1</a></li>
<li class="pagination--list-item pagination--list-item--xxs"><a href="#" class="pagination--link">2</a></li>
<li class="pagination--list-item pagination--list-item--xs"><a href="#" class="pagination--link">3</a></li>
<li class="pagination--list-item pagination--list-item--xs"><a href="#" class="pagination--link">4</a></li>
<li class="pagination--list-item pagination--list-item--xs"><a href="#" class="pagination--link">5</a></li>
<li class="pagination--list-item pagination--list-item--sm"><a href="#" class="pagination--link">6</a></li>
<li class="pagination--list-item pagination--list-item--sm"><a href="#" class="pagination--link">7</a></li>
<li class="pagination--list-item pagination--list-item--sm"><a href="#" class="pagination--link">8</a></li>
<li class="pagination--list-item pagination--list-item--md"><a href="#" class="pagination--link">9</a></li>
<li class="pagination--list-item pagination--list-item--md"><a href="#" class="pagination--link">10</a></li>
<li class="pagination--list-item pagination--list-item--md"><a href="#" class="pagination--link">11</a></li>
<li class="pagination--list-item pagination--list-item--md"><a href="#" class="pagination--link">12</a></li>
<li class="pagination--list-item pagination--list-item--lg"><a href="#" class="pagination--link">13</a></li>
<li class="pagination--list-item pagination--list-item--lg"><a href="#" class="pagination--link">14</a></li>
<li class="pagination--list-item pagination--list-item--lg"><a href="#" class="pagination--link">15</a></li>
<li class="pagination--list-item pagination--list-item--xl"><a href="#" class="pagination--link">16</a></li>
<li class="pagination--list-item pagination--list-item--xl"><a href="#" class="pagination--link">17</a></li>
<li class="pagination--list-item pagination--list-item--xl"><a href="#" class="pagination--link">18</a></li>
<li class="pagination--list-item pagination--list-item--xl"><a href="#" class="pagination--link">19</a></li>
<li class="pagination--list-item pagination--list-item--xl"><a href="#" class="pagination--link">20</a></li>
<li class="pagination--list-item pagination--list-item--xxl"><a href="#" class="pagination--link">21</a></li>
<li class="pagination--list-item pagination--list-item--xxl"><a href="#" class="pagination--link">22</a></li>
<li class="pagination--list-item pagination--list-item--xxl"><a href="#" class="pagination--link">23</a></li>
<li class="pagination--list-item pagination--list-item--xxl"><a href="#" class="pagination--link">24</a></li>
<li class="pagination--list-item pagination--list-item--xxl"><a href="#" class="pagination--link">25</a></li>
<li class="pagination--list-item page--next"><a href="#" class="pagination--link"><span class="sr-only">Next</span> <span class="arrow arrow--right"></span></a></li>
<li class="pagination--list-item page--last"><a href="#" class="pagination--link"><span class="sr-only">Last</span> <span class="arrow arrow--right"></span><span class="arrow arrow--right"></span></a></li>
</ul>Tables
Base
| Framework | Version | Size | Initial Release | Developer | Website |
|---|---|---|---|---|---|
| AngularJS | 2.20 | 144kb | October 20, 2010 | https://angular.io/ | |
| React | 15.4.0 | 128kb | March 2013 | Facebook, Instagram | http://facebook.github.io/react |
| Knockout | 3.4.1 | 58kb | July 5, 2010 | Steve Sanderson | http://knockoutjs.com/ |
| Ember | 2.10.0 | 514kb | December 8, 2011 | Ember Core Team | https://github.com/emberjs/ember.js |
| Backbone.js | 1.3.3 | 7.5kb | October 13, 2010 | Jeremy Ashkenas | http://backbonejs.org/ |
| Meteor | 1.4 | ? | January 20, 2012 | Meteor Development Group | https://www.meteor.com/ |
| Sails | 0.12 | ? | 2012 | Balderdash Design Company & The Treeline Company | http://sailsjs.org/ |
<div class="table--overflow">
<table class="table">
<thead class="table--header">
<tr class="table--row">
<th class="table--header-cell">Framework</th>
<th class="table--header-cell">Version</th>
<th class="table--header-cell">Size</th>
<th class="table--header-cell">Initial Release</th>
<th class="table--header-cell">Developer</th>
<th class="table--header-cell">Website</th>
</tr>
</thead>
<tbody class="table--body">
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">AngularJS</td>
<td class="table--cell" data-table-header="Version">2.20</td>
<td class="table--cell" data-table-header="Size">144kb</td>
<td class="table--cell" data-table-header="Initial Release">October 20, 2010</td>
<td class="table--cell" data-table-header="Developer">Google</td>
<td class="table--cell" data-table-header="Website"><a href="https://angular.io/">https://angular.io/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">React</td>
<td class="table--cell" data-table-header="Version">15.4.0</td>
<td class="table--cell" data-table-header="Size">128kb</td>
<td class="table--cell" data-table-header="Initial Release">March 2013</td>
<td class="table--cell" data-table-header="Developer">Facebook, Instagram</td>
<td class="table--cell" data-table-header="Website"><a href="http://facebook.github.io/react">http://facebook.github.io/react</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Knockout</td>
<td class="table--cell" data-table-header="Version">3.4.1</td>
<td class="table--cell" data-table-header="Size">58kb</td>
<td class="table--cell" data-table-header="Initial Release">July 5, 2010</td>
<td class="table--cell" data-table-header="Developer">Steve Sanderson</td>
<td class="table--cell" data-table-header="Website"><a href="http://knockoutjs.com/">http://knockoutjs.com/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Ember</td>
<td class="table--cell" data-table-header="Version">2.10.0</td>
<td class="table--cell" data-table-header="Size">514kb</td>
<td class="table--cell" data-table-header="Initial Release">December 8, 2011</td>
<td class="table--cell" data-table-header="Developer">Ember Core Team</td>
<td class="table--cell" data-table-header="Website"><a href="https://github.com/emberjs/ember.js">https://github.com/emberjs/ember.js</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Backbone.js</td>
<td class="table--cell" data-table-header="Version">1.3.3</td>
<td class="table--cell" data-table-header="Size">7.5kb</td>
<td class="table--cell" data-table-header="Initial Release">October 13, 2010</td>
<td class="table--cell" data-table-header="Developer">Jeremy Ashkenas</td>
<td class="table--cell" data-table-header="Website"><a href="http://backbonejs.org/">http://backbonejs.org/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Meteor</td>
<td class="table--cell" data-table-header="Version">1.4</td>
<td class="table--cell" data-table-header="Size">?</td>
<td class="table--cell" data-table-header="Initial Release">January 20, 2012</td>
<td class="table--cell" data-table-header="Developer">Meteor Development Group</td>
<td class="table--cell" data-table-header="Website"><a href="https://www.meteor.com/">https://www.meteor.com/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Sails</td>
<td class="table--cell" data-table-header="Version">0.12</td>
<td class="table--cell" data-table-header="Size">?</td>
<td class="table--cell" data-table-header="Initial Release">2012</td>
<td class="table--cell" data-table-header="Developer">Balderdash Design Company & The Treeline Company</td>
<td class="table--cell" data-table-header="Website"><a href="http://sailsjs.org/">http://sailsjs.org/</a></td>
</tr>
</tbody>
</table>
</div>Block Tables
Use block tables for better responsive tables when you have full control over the HTML rendering of the table. Block tables work by adding a data attribute to each table cell, which then is rendered by CSS pseudo content.
Note: The example below is block at all sizes. You probably want to turn the block table back into a normal table at some point. Use table--xxs through table--xxl to turn back into a normal table at breakpoints.
| Framework | Version | Size | Initial Release | Developer | Website |
|---|---|---|---|---|---|
| AngularJS | 2.20 | 144kb | October 20, 2010 | https://angular.io/ | |
| React | 15.4.0 | 128kb | March 2013 | Facebook, Instagram | http://facebook.github.io/react |
| Knockout | 3.4.1 | 58kb | July 5, 2010 | Steve Sanderson | http://knockoutjs.com/ |
| Ember | 2.10.0 | 514kb | December 8, 2011 | Ember Core Team | https://github.com/emberjs/ember.js |
| Backbone.js | 1.3.3 | 7.5kb | October 13, 2010 | Jeremy Ashkenas | http://backbonejs.org/ |
| Meteor | 1.4 | ? | January 20, 2012 | Meteor Development Group | https://www.meteor.com/ |
| Sails | 0.12 | ? | 2012 | Balderdash Design Company & The Treeline Company | http://sailsjs.org/ |
<table class="table table--block">
<thead class="table--header">
<tr class="table--row">
<th class="table--header-cell">Framework</th>
<th class="table--header-cell">Version</th>
<th class="table--header-cell">Size</th>
<th class="table--header-cell">Initial Release</th>
<th class="table--header-cell">Developer</th>
<th class="table--header-cell">Website</th>
</tr>
</thead>
<tbody class="table--body">
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">AngularJS</td>
<td class="table--cell" data-table-header="Version">2.20</td>
<td class="table--cell" data-table-header="Size">144kb</td>
<td class="table--cell" data-table-header="Initial Release">October 20, 2010</td>
<td class="table--cell" data-table-header="Developer">Google</td>
<td class="table--cell" data-table-header="Website"><a href="https://angular.io/">https://angular.io/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">React</td>
<td class="table--cell" data-table-header="Version">15.4.0</td>
<td class="table--cell" data-table-header="Size">128kb</td>
<td class="table--cell" data-table-header="Initial Release">March 2013</td>
<td class="table--cell" data-table-header="Developer">Facebook, Instagram</td>
<td class="table--cell" data-table-header="Website"><a href="http://facebook.github.io/react">http://facebook.github.io/react</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Knockout</td>
<td class="table--cell" data-table-header="Version">3.4.1</td>
<td class="table--cell" data-table-header="Size">58kb</td>
<td class="table--cell" data-table-header="Initial Release">July 5, 2010</td>
<td class="table--cell" data-table-header="Developer">Steve Sanderson</td>
<td class="table--cell" data-table-header="Website"><a href="http://knockoutjs.com/">http://knockoutjs.com/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Ember</td>
<td class="table--cell" data-table-header="Version">2.10.0</td>
<td class="table--cell" data-table-header="Size">514kb</td>
<td class="table--cell" data-table-header="Initial Release">December 8, 2011</td>
<td class="table--cell" data-table-header="Developer">Ember Core Team</td>
<td class="table--cell" data-table-header="Website"><a href="https://github.com/emberjs/ember.js">https://github.com/emberjs/ember.js</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Backbone.js</td>
<td class="table--cell" data-table-header="Version">1.3.3</td>
<td class="table--cell" data-table-header="Size">7.5kb</td>
<td class="table--cell" data-table-header="Initial Release">October 13, 2010</td>
<td class="table--cell" data-table-header="Developer">Jeremy Ashkenas</td>
<td class="table--cell" data-table-header="Website"><a href="http://backbonejs.org/">http://backbonejs.org/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Meteor</td>
<td class="table--cell" data-table-header="Version">1.4</td>
<td class="table--cell" data-table-header="Size">?</td>
<td class="table--cell" data-table-header="Initial Release">January 20, 2012</td>
<td class="table--cell" data-table-header="Developer">Meteor Development Group</td>
<td class="table--cell" data-table-header="Website"><a href="https://www.meteor.com/">https://www.meteor.com/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell" data-table-header="Framework">Sails</td>
<td class="table--cell" data-table-header="Version">0.12</td>
<td class="table--cell" data-table-header="Size">?</td>
<td class="table--cell" data-table-header="Initial Release">2012</td>
<td class="table--cell" data-table-header="Developer">Balderdash Design Company & The Treeline Company</td>
<td class="table--cell" data-table-header="Website"><a href="http://sailsjs.org/">http://sailsjs.org/</a></td>
</tr>
</tbody>
</table>Fixed Tables
Use fixed tables for better responsive tables. Fixed tables work by floating the table header to the left and allowing for overflow scrolling on the table body.
Note: The example below is fixed at all sizes. You probably want to turn the fixed table back into a normal table at some point. Use table--xxs through table--xxl to turn back into a normal table at breakpoints.
| Framework | Version | Size | Initial Release | Developer | Website |
|---|---|---|---|---|---|
| AngularJS | 2.20 | 144kb | October 20, 2010 | https://angular.io/ | |
| React | 15.4.0 | 128kb | March 2013 | Facebook, Instagram | http://facebook.github.io/react |
| Knockout | 3.4.1 | 58kb | July 5, 2010 | Steve Sanderson | http://knockoutjs.com/ |
| Ember | 2.10.0 | 514kb | December 8, 2011 | Ember Core Team | https://github.com/emberjs/ember.js |
| Backbone.js | 1.3.3 | 7.5kb | October 13, 2010 | Jeremy Ashkenas | http://backbonejs.org/ |
| Meteor | 1.4 | ? | January 20, 2012 | Meteor Development Group | https://www.meteor.com/ |
| Sails | 0.12 | ? | 2012 | Balderdash Design Company & The Treeline Company | http://sailsjs.org/ |
<table class="table table--fixed">
<thead class="table--header">
<tr class="table--row">
<th class="table--header-cell">Framework</th>
<th class="table--header-cell">Version</th>
<th class="table--header-cell">Size</th>
<th class="table--header-cell">Initial Release</th>
<th class="table--header-cell">Developer</th>
<th class="table--header-cell">Website</th>
</tr>
</thead>
<tbody class="table--body">
<tr class="table--row">
<td class="table--cell">AngularJS</td>
<td class="table--cell">2.20</td>
<td class="table--cell">144kb</td>
<td class="table--cell">October 20, 2010</td>
<td class="table--cell">Google</td>
<td class="table--cell"><a href="https://angular.io/">https://angular.io/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell">React</td>
<td class="table--cell">15.4.0</td>
<td class="table--cell">128kb</td>
<td class="table--cell">March 2013</td>
<td class="table--cell">Facebook, Instagram</td>
<td class="table--cell"><a href="http://facebook.github.io/react">http://facebook.github.io/react</a></td>
</tr>
<tr class="table--row">
<td class="table--cell">Knockout</td>
<td class="table--cell">3.4.1</td>
<td class="table--cell">58kb</td>
<td class="table--cell">July 5, 2010</td>
<td class="table--cell">Steve Sanderson</td>
<td class="table--cell"><a href="http://knockoutjs.com/">http://knockoutjs.com/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell">Ember</td>
<td class="table--cell">2.10.0</td>
<td class="table--cell">514kb</td>
<td class="table--cell">December 8, 2011</td>
<td class="table--cell">Ember Core Team</td>
<td class="table--cell"><a href="https://github.com/emberjs/ember.js">https://github.com/emberjs/ember.js</a></td>
</tr>
<tr class="table--row">
<td class="table--cell">Backbone.js</td>
<td class="table--cell">1.3.3</td>
<td class="table--cell">7.5kb</td>
<td class="table--cell">October 13, 2010</td>
<td class="table--cell">Jeremy Ashkenas</td>
<td class="table--cell"><a href="http://backbonejs.org/">http://backbonejs.org/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell">Meteor</td>
<td class="table--cell">1.4</td>
<td class="table--cell">?</td>
<td class="table--cell">January 20, 2012</td>
<td class="table--cell">Meteor Development Group</td>
<td class="table--cell"><a href="https://www.meteor.com/">https://www.meteor.com/</a></td>
</tr>
<tr class="table--row">
<td class="table--cell">Sails</td>
<td class="table--cell">0.12</td>
<td class="table--cell">?</td>
<td class="table--cell">2012</td>
<td class="table--cell">Balderdash Design Company & The Treeline Company</td>
<td class="table--cell"><a href="http://sailsjs.org/">http://sailsjs.org/</a></td>
</tr>
</tbody>
</table>Tabs - Horizontal
Horizontal tabs are accordions by default, and through the use of breakpoint classes, turn into tabs. The experience for small screen devices will be better, and you can also control when tabs show if you have many tabs. Tabs have many classes, id's, and attributes needed to work properly, so if you have issues, make sure you haven't forgotten one.
Note: Horizontal tab accordions work slightly differently from the accordion component in that the horizontal tab accordion action will close all other open horizontal-tabs--tab-content containers. Accordions do not close other content containers.
Horizontal require jQuery and the Mercury UI Framework horizontal tabs plugin to work. Note: You will need
to initialize them by calling $().mercuryuiTabsHorizontal();.
You can also open horizontal tabs individually via the plugin through actions by targeting the id of the tab:
$('#horizontal-tab-xxs-content-1').mercuryuiTabsHorizontal('open'); .
Callbacks are provided for beforeOpen and afterOpen. An example for afterOpen would be:
$('#horizontal-tab-xxs-content-1').mercuryuiTabsHorizontal('open', { afterOpen: function(){ alert('Tab opened!'); } });.
Base
Note: The base example does not include the horizontal-tabs--tabs container which includes the actual horizontal-tabs--tab tab buttons. You probably want one of the breakpoints below.
Tab 1 content
<div class="horizontal-tabs" id="horizontal-tabs--base">
<div class="horizontal-tabs--tab-contents">
<button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-base-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-base-content-1" aria-labelledby="horizontal-tab-base-1" aria-hidden="false">
<p>Tab 1 content</p>
</div>
<button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-base-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content" id="horizontal-tab-base-content-2" aria-labelledby="horizontal-tab-base-2" aria-hidden="true">
<p>Tab 2 content</p>
</div>
</div>
</div>XXS & Up
Tab 1 content
<div class="horizontal-tabs horizontal-tabs--xxs" id="horizontal-tabs--xxs">
<div class="horizontal-tabs--tabs">
<button type="button" class="horizontal-tabs--tab tab-is-active" id="horizontal-tab-xxs-1" aria-controls="horizontal-tab-xxs-content-1" aria-selected="true">Tab 1</button>
<button type="button" class="horizontal-tabs--tab" id="horizontal-tab-xxs-2" aria-controls="horizontal-tab-xxs-content-2" aria-selected="false">Tab 2</button>
</div>
<div class="horizontal-tabs--tab-contents">
<button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-xxs-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-xxs-content-1" aria-labelledby="horizontal-tab-xxs-1" aria-hidden="false">
<p>Tab 1 content</p>
</div>
<button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-xxs-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content" id="horizontal-tab-xxs-content-2" aria-labelledby="horizontal-tab-xxs-2" aria-hidden="true">
<p>Tab 2 content</p>
</div>
</div>
</div>XS & Up
Tab 1 content
<div class="horizontal-tabs horizontal-tabs--xs" id="horizontal-tabs--xs">
<div class="horizontal-tabs--tabs">
<button type="button" class="horizontal-tabs--tab tab-is-active" id="horizontal-tab-xs-1" aria-controls="horizontal-tab-xs-content-1" aria-selected="true">Tab 1</button>
<button type="button" class="horizontal-tabs--tab" id="horizontal-tab-xs-2" aria-controls="horizontal-tab-xs-content-2" aria-selected="false">Tab 2</button>
</div>
<div class="horizontal-tabs--tab-contents">
<button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-xs-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-xs-content-1" aria-labelledby="horizontal-tab-xs-1" aria-hidden="false">
<p>Tab 1 content</p>
</div>
<button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-xs-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content" id="horizontal-tab-xs-content-2" aria-labelledby="horizontal-tab-xs-2" aria-hidden="true">
<p>Tab 2 content</p>
</div>
</div>
</div>SM & Up
Tab 1 content
<div class="horizontal-tabs horizontal-tabs--sm" id="horizontal-tabs--sm">
<div class="horizontal-tabs--tabs">
<button type="button" class="horizontal-tabs--tab tab-is-active" id="horizontal-tab-sm-1" aria-controls="horizontal-tab-sm-content-1" aria-selected="true">Tab 1</button>
<button type="button" class="horizontal-tabs--tab" id="horizontal-tab-sm-2" aria-controls="horizontal-tab-sm-content-2" aria-selected="false">Tab 2</button>
</div>
<div class="horizontal-tabs--tab-contents">
<button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-sm-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-sm-content-1" aria-labelledby="horizontal-tab-sm-1" aria-hidden="false">
<p>Tab 1 content</p>
</div>
<button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-sm-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content" id="horizontal-tab-sm-content-2" aria-labelledby="horizontal-tab-sm-2" aria-hidden="true">
<p>Tab 2 content</p>
</div>
</div>
</div>MD & Up
Tab 1 content
<div class="horizontal-tabs horizontal-tabs--md" id="horizontal-tabs--md">
<div class="horizontal-tabs--tabs">
<button type="button" class="horizontal-tabs--tab tab-is-active" id="horizontal-tab-md-1" aria-controls="horizontal-tab-md-content-1" aria-selected="true">Tab 1</button>
<button type="button" class="horizontal-tabs--tab" id="horizontal-tab-md-2" aria-controls="horizontal-tab-md-content-2" aria-selected="false">Tab 2</button>
</div>
<div class="horizontal-tabs--tab-contents">
<button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-md-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-md-content-1" aria-labelledby="horizontal-tab-md-1" aria-hidden="false">
<p>Tab 1 content</p>
</div>
<button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-md-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content" id="horizontal-tab-md-content-2" aria-labelledby="horizontal-tab-md-2" aria-hidden="true">
<p>Tab 2 content</p>
</div>
</div>
</div>LG & Up
Tab 1 content
<div class="horizontal-tabs horizontal-tabs--lg" id="horizontal-tabs--lg">
<div class="horizontal-tabs--tabs">
<button type="button" class="horizontal-tabs--tab tab-is-active" id="horizontal-tab-lg-1" aria-controls="horizontal-tab-lg-content-1" aria-selected="true">Tab 1</button>
<button type="button" class="horizontal-tabs--tab" id="horizontal-tab-lg-2" aria-controls="horizontal-tab-lg-content-2" aria-selected="false">Tab 2</button>
</div>
<div class="horizontal-tabs--tab-contents">
<button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-lg-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-lg-content-1" aria-labelledby="horizontal-tab-lg-1" aria-hidden="false">
<p>Tab 1 content</p>
</div>
<button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-lg-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content" id="horizontal-tab-lg-content-2" aria-labelledby="horizontal-tab-lg-2" aria-hidden="true">
<p>Tab 2 content</p>
</div>
</div>
</div>XL & Up
Tab 1 content
<div class="horizontal-tabs horizontal-tabs--xl" id="horizontal-tabs--xl">
<div class="horizontal-tabs--tabs">
<button type="button" class="horizontal-tabs--tab tab-is-active" id="horizontal-tab-xl-1" aria-controls="horizontal-tab-xl-content-1" aria-selected="true">Tab 1</button>
<button type="button" class="horizontal-tabs--tab" id="horizontal-tab-xl-2" aria-controls="horizontal-tab-xl-content-2" aria-selected="false">Tab 2</button>
</div>
<div class="horizontal-tabs--tab-contents">
<button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-xl-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-xl-content-1" aria-labelledby="horizontal-tab-xl-1" aria-hidden="false">
<p>Tab 1 content</p>
</div>
<button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-xl-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content" id="horizontal-tab-xl-content-2" aria-labelledby="horizontal-tab-xl-2" aria-hidden="true">
<p>Tab 2 content</p>
</div>
</div>
</div>XXL & Up
Tab 1 content
<div class="horizontal-tabs horizontal-tabs--xxl" id="horizontal-tabs--xxl">
<div class="horizontal-tabs--tabs">
<button type="button" class="horizontal-tabs--tab tab-is-active" id="horizontal-tab-xxl-1" aria-controls="horizontal-tab-xxl-content-1" aria-selected="true">Tab 1</button>
<button type="button" class="horizontal-tabs--tab" id="horizontal-tab-xxl-2" aria-controls="horizontal-tab-xxl-content-2" aria-selected="false">Tab 2</button>
</div>
<div class="horizontal-tabs--tab-contents">
<button type="button" class="horizontal-tabs--tab-accordion tab-is-active" aria-controls="horizontal-tab-xxl-content-1" aria-selected="true">Tab 1 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content tab-content-is-shown" id="horizontal-tab-xxl-content-1" aria-labelledby="horizontal-tab-xxl-1" aria-hidden="false">
<p>Tab 1 content</p>
</div>
<button type="button" class="horizontal-tabs--tab-accordion" aria-controls="horizontal-tab-xxl-content-2" aria-selected="false">Tab 2 <span class="arrow"></span></button>
<div class="horizontal-tabs--tab-content" id="horizontal-tab-xxl-content-2" aria-labelledby="horizontal-tab-xxl-2" aria-hidden="true">
<p>Tab 2 content</p>
</div>
</div>
</div>Tabs - Vertical
Vertical tabs are accordions by default, and through the use of breakpoint classes, turn into vertical tabs. The experience for small screen devices will be better, and you can also control when tabs show if you have many tabs. Tabs have many classes, id's, and attributes needed to work properly, so if you have issues, make sure you haven't forgotten one.
Note: Vertical tab accordions work slightly differently from the accordion component in that the vertical tab accordion action will close all other open vertical-tabs--tab-content containers. Accordions do not close other content containers.
Vertical require jQuery and the Mercury UI Framework vertical tabs plugin to work. Note: You will need
to initialize them by calling $().mercuryuiTabsVertical();.
You can also open vertical tabs individually via the plugin through actions by targeting the id of the tab:
$('#vertical-tab-xxs-content-1').mercuryuiTabsVertical('open'); .
Callbacks are provided for beforeOpen and afterOpen. An example for afterOpen would be:
$('#vertical-tab-xxs-content-1').mercuryuiTabsVertical('open', { afterOpen: function(){ alert('Tab opened!'); } });.
Base
Note: The base example does not include the vertical-tabs--tab-list container which includes the actual vertical-tabs--tab tab buttons. You probably want one of the breakpoints below.
Tab 1 content
<div class="vertical-tabs" id="vertical-tabs--base">
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-base-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-base-content-1" aria-labelledby="vertical-tab-base-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-base-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-base-content-2" aria-labelledby="vertical-tab-base-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>XXS & Up
Tab 1 content
<div class="vertical-tabs vertical-tabs--xxs" id="vertical-tabs--xxs">
<ul class="vertical-tabs--tab-list" role="tablist">
<li class="vertical-tabs--tab-list-item tab-is-active">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xxs-1" aria-controls="vertical-tab-xxs-content-1" aria-selected="true" role="tab">Tab 1</button>
</li>
<li class="vertical-tabs--tab-list-item">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xxs-2" aria-controls="vertical-tab-xxs-content-2" aria-selected="false" role="tab">Tab 2</button>
</li>
</ul>
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-xxs-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-xxs-content-1" aria-labelledby="vertical-tab-xxs-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-xxs-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-xxs-content-2" aria-labelledby="vertical-tab-xxs-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>XS & Up
Tab 1 content
<div class="vertical-tabs vertical-tabs--xs" id="vertical-tabs--xs">
<ul class="vertical-tabs--tab-list" role="tablist">
<li class="vertical-tabs--tab-list-item tab-is-active">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xs-1" aria-controls="vertical-tab-xs-content-1" aria-selected="true" role="tab">Tab 1</button>
</li>
<li class="vertical-tabs--tab-list-item">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xs-2" aria-controls="vertical-tab-xs-content-2" aria-selected="false" role="tab">Tab 2</button>
</li>
</ul>
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-xs-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-xs-content-1" aria-labelledby="vertical-tab-xs-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-xs-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-xs-content-2" aria-labelledby="vertical-tab-xs-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>SM & Up
Tab 1 content
<div class="vertical-tabs vertical-tabs--sm" id="vertical-tabs--sm">
<ul class="vertical-tabs--tab-list" role="tablist">
<li class="vertical-tabs--tab-list-item tab-is-active">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-sm-1" aria-controls="vertical-tab-sm-content-1" aria-selected="true" role="tab">Tab 1</button>
</li>
<li class="vertical-tabs--tab-list-item">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-sm-2" aria-controls="vertical-tab-sm-content-2" aria-selected="false" role="tab">Tab 2</button>
</li>
</ul>
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-sm-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-sm-content-1" aria-labelledby="vertical-tab-sm-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-sm-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-sm-content-2" aria-labelledby="vertical-tab-sm-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>MD & Up
Tab 1 content
<div class="vertical-tabs vertical-tabs--md" id="vertical-tabs--md">
<ul class="vertical-tabs--tab-list" role="tablist">
<li class="vertical-tabs--tab-list-item tab-is-active">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-md-1" aria-controls="vertical-tab-md-content-1" aria-selected="true" role="tab">Tab 1</button>
</li>
<li class="vertical-tabs--tab-list-item">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-md-2" aria-controls="vertical-tab-md-content-2" aria-selected="false" role="tab">Tab 2</button>
</li>
</ul>
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-md-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-md-content-1" aria-labelledby="vertical-tab-md-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-md-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-md-content-2" aria-labelledby="vertical-tab-md-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>LG & Up
Tab 1 content
<div class="vertical-tabs vertical-tabs--lg" id="vertical-tabs--lg">
<ul class="vertical-tabs--tab-list" role="tablist">
<li class="vertical-tabs--tab-list-item tab-is-active">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-lg-1" aria-controls="vertical-tab-lg-content-1" aria-selected="true" role="tab">Tab 1</button>
</li>
<li class="vertical-tabs--tab-list-item">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-lg-2" aria-controls="vertical-tab-lg-content-2" aria-selected="false" role="tab">Tab 2</button>
</li>
</ul>
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-lg-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-lg-content-1" aria-labelledby="vertical-tab-lg-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-lg-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-lg-content-2" aria-labelledby="vertical-tab-lg-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>XL & Up
Tab 1 content
<div class="vertical-tabs vertical-tabs--xl" id="vertical-tabs--xl">
<ul class="vertical-tabs--tab-list" role="tablist">
<li class="vertical-tabs--tab-list-item tab-is-active">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xl-1" aria-controls="vertical-tab-xl-content-1" aria-selected="true" role="tab">Tab 1</button>
</li>
<li class="vertical-tabs--tab-list-item">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xl-2" aria-controls="vertical-tab-xl-content-2" aria-selected="false" role="tab">Tab 2</button>
</li>
</ul>
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-xl-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-xl-content-1" aria-labelledby="vertical-tab-xl-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-xl-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-xl-content-2" aria-labelledby="vertical-tab-xl-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>XXL & Up
Tab 1 content
<div class="vertical-tabs vertical-tabs--xxl" id="vertical-tabs--xxl">
<ul class="vertical-tabs--tab-list" role="tablist">
<li class="vertical-tabs--tab-list-item tab-is-active">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xxl-1" aria-controls="vertical-tab-xxl-content-1" aria-selected="true" role="tab">Tab 1</button>
</li>
<li class="vertical-tabs--tab-list-item">
<button type="button" class="vertical-tabs--tab" id="vertical-tab-xxl-2" aria-controls="vertical-tab-xxl-content-2" aria-selected="false" role="tab">Tab 2</button>
</li>
</ul>
<div class="vertical-tabs--tab-contents">
<button type="button" class="vertical-tabs--tab-accordion tab-is-active" aria-controls="vertical-tab-xxl-content-1" aria-selected="true" role="tab">Tab 1 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content tab-content-is-shown" id="vertical-tab-xxl-content-1" aria-labelledby="vertical-tab-xxl-1" aria-hidden="false" tabindex="0" role="tabpanel">
<p>Tab 1 content</p>
</div>
<button type="button" class="vertical-tabs--tab-accordion" aria-controls="vertical-tab-xxl-content-2" aria-selected="false" role="tab">Tab 2 <span class="arrow"></span></button>
<div class="vertical-tabs--tab-content" id="vertical-tab-xxl-content-2" aria-labelledby="vertical-tab-xxl-2" aria-hidden="true" tabindex="-1" role="tabpanel">
<p>Tab 2 content</p>
</div>
</div>
</div>Toolbars
Base
Toolbars are useful for providing controls above content. They can include any kind of content but are best suited for buttons and dropdowns.
Required elements and classes include a containing element with the toolbar class and at least one column with the toolbar--column class. Adding a toolbar--border class to the toolbar element will add a bottom border that helps divide the toolbar from the content below it.
<div class="toolbar toolbar--border">
<div class="toolbar--column">
<button type="button" class="button button--white">Filter</button>
</div>
<div class="toolbar--column">
<button type="button" class="button button--white">Share</button>
<button type="button" class="button button--white">Settings</button>
</div>
</div>Breakpoints
You may activate toolbars by using the breakpoint classes --xxs through --xxl.
XXS & Up
<div class="toolbar--xxs toolbar--border">
<div class="toolbar--column">
<div class="dropdown margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Filter <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
</div>
<div class="toolbar--column">
<div class="dropdown dropdown--right--xxs margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Share <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
<div class="dropdown dropdown--right--xxs margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Settings <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
</div>
</div>XS & Up
<div class="toolbar--xs toolbar--border">
<div class="toolbar--column">
<div class="dropdown margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Filter <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
</div>
<div class="toolbar--column">
<div class="dropdown dropdown--right--xs margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Share <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
<div class="dropdown dropdown--right--xs margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Settings <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
</div>
</div>SM & Up
<div class="toolbar--sm toolbar--border">
<div class="toolbar--column">
<div class="dropdown margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Filter <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
</div>
<div class="toolbar--column">
<div class="dropdown dropdown--right--sm margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Share <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
<div class="dropdown dropdown--right--sm margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Settings <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
</div>
</div>MD & Up
<div class="toolbar--md toolbar--border">
<div class="toolbar--column">
<div class="dropdown margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Filter <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
</div>
<div class="toolbar--column">
<div class="dropdown dropdown--right--md margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Share <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
<div class="dropdown dropdown--right--md margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Settings <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
</div>
</div>LG & Up
<div class="toolbar--lg toolbar--border">
<div class="toolbar--column">
<div class="dropdown margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Filter <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
</div>
<div class="toolbar--column">
<div class="dropdown dropdown--right--lg margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Share <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
<div class="dropdown dropdown--right--lg margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Settings <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
</div>
</div>XL & Up
<div class="toolbar--xl toolbar--border">
<div class="toolbar--column">
<div class="dropdown margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Filter <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
</div>
<div class="toolbar--column">
<div class="dropdown dropdown--right--xl margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Share <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
<div class="dropdown dropdown--right--xl margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Settings <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
</div>
</div>XXL & Up
<div class="toolbar--xxl toolbar--border">
<div class="toolbar--column">
<div class="dropdown margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Filter <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
</div>
<div class="toolbar--column">
<div class="dropdown dropdown--right--xxl margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Share <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
<div class="dropdown dropdown--right--xxl margin--off">
<button type="button" class="button button--white dropdown--button" aria-expanded="false">
Settings <span class="arrow"></span>
</button>
<div class="dropdown--list">
<a href="#" class="dropdown--link">Dropdown Link</a>
<div class="dropdown--divider"></div>
<a href="#" class="dropdown--link">Dropdown Link</a>
</div>
</div>
</div>
</div>Tooltips
Base
Tooltips require the tooltip class, one of the four direction classes tooltip--top tooltip--right tooltip--bottom or tooltip--left, and the data-tooltip attribute containing your content. Tooltips work by utilizing the power of CSS pseudo classes.
<button type="button" class="button button--white tooltip tooltip--top" data-tooltip="I'm a top tooltip!">
Button With A Top Tooltip
</button><button type="button" class="button button--white tooltip tooltip--bottom" data-tooltip="I'm a bottom tooltip!">
Button With A Bottom Tooltip
</button><button type="button" class="button button--white tooltip tooltip--left" data-tooltip="I'm a left tooltip!">
Button With A Left Tooltip
</button><button type="button" class="button button--white tooltip tooltip--right" data-tooltip="I'm a right tooltip!">
Button With A Right Tooltip
</button>Primary Color
<button type="button" class="button button--white tooltip tooltip--top tooltip--primary-color" data-tooltip="I'm a top tooltip!">
Button With A Top Tooltip
</button><button type="button" class="button button--white tooltip tooltip--bottom tooltip--primary-color" data-tooltip="I'm a bottom tooltip!">
Button With A Bottom Tooltip
</button><button type="button" class="button button--white tooltip tooltip--left tooltip--primary-color" data-tooltip="I'm a left tooltip!">
Button With A Left Tooltip
</button><button type="button" class="button button--white tooltip tooltip--right tooltip--primary-color" data-tooltip="I'm a right tooltip!">
Button With A Right Tooltip
</button>Secondary Color
<button type="button" class="button button--white tooltip tooltip--top tooltip--secondary-color" data-tooltip="I'm a top tooltip!">
Button With A Top Tooltip
</button><button type="button" class="button button--white tooltip tooltip--bottom tooltip--secondary-color" data-tooltip="I'm a bottom tooltip!">
Button With A Bottom Tooltip
</button><button type="button" class="button button--white tooltip tooltip--left tooltip--secondary-color" data-tooltip="I'm a left tooltip!">
Button With A Left Tooltip
</button><button type="button" class="button button--white tooltip tooltip--right tooltip--secondary-color" data-tooltip="I'm a right tooltip!">
Button With A Right Tooltip
</button>Tertiary Color
<button type="button" class="button button--white tooltip tooltip--top tooltip--tertiary-color" data-tooltip="I'm a top tooltip!">
Button With A Top Tooltip
</button><button type="button" class="button button--white tooltip tooltip--bottom tooltip--tertiary-color" data-tooltip="I'm a bottom tooltip!">
Button With A Bottom Tooltip
</button><button type="button" class="button button--white tooltip tooltip--left tooltip--tertiary-color" data-tooltip="I'm a left tooltip!">
Button With A Left Tooltip
</button><button type="button" class="button button--white tooltip tooltip--right tooltip--tertiary-color" data-tooltip="I'm a right tooltip!">
Button With A Right Tooltip
</button>Sizes
Tooltip sizes include smallest, smaller, medium, large, larger, and largest. You can also change sizes at breakpoints by appending sizes with --xxs through --xxl.
<button type="button" class="button button--white tooltip tooltip--top tooltip--smallest" data-tooltip="I'm the smallest tooltip!">
Button With The Smallest Tooltip
</button><button type="button" class="button button--white tooltip tooltip--top tooltip--smaller" data-tooltip="I'm the smaller tooltip!">
Button With The Smaller Tooltip
</button><button type="button" class="button button--white tooltip tooltip--top tooltip--small" data-tooltip="I'm the small tooltip!">
Button With The Small Tooltip
</button><button type="button" class="button button--white tooltip tooltip--top tooltip--medium" data-tooltip="I'm the medium tooltip!">
Button With The Medium Tooltip
</button><button type="button" class="button button--white tooltip tooltip--top tooltip--large" data-tooltip="I'm the large tooltip!">
Button With The Large Tooltip
</button><button type="button" class="button button--white tooltip tooltip--top tooltip--larger" data-tooltip="I'm the larger tooltip!">
Button With The Larger Tooltip
</button><button type="button" class="button button--white tooltip tooltip--top tooltip--largest" data-tooltip="I'm the largest tooltip!">
Button With The Largest Tooltip
</button>