H1 Header 1

The page header is the title to your page. This is also referred to as Header 1 or H1. Because it is used as the title, there can only be one H1 per page. When titling your page it is important to accurately describe the pages’s content so that search engines can find your page. For this same reason we recommend never omitting an H1 on any given page.

H2 Header 2

The above title is created by selecting Heading 2 from the format dropdown in the WYSIWYG. The Sub Title Header provides an easy way to break your page up into Sub Sections.

H3 Header 3

The above title is created by selecting Heading 3 from the format dropdown in the WYSIWYG. The Third Level Header is used to separate sub sections with a clear sense of hierarchy within a Sub Section.

H4 Header 4

The above title is created by selecting Heading 4 from the format dropdown in the WYSIWYG. The Fourth Level Header provides yet another level to help break a page up into easily digested sections.

H5 Header 5

The above title is created by selecting Heading 5 from the format dropdown in the WYSIWYG. The Fourth Level Header provides yet another level to help break a page up into easily digested sections.

<button class="btn btn-cta btn-cta--primary">Primary CTA</button>
<button class="btn btn-cta btn-cta--secondary">Secondary CTA</button>
Add to cart <a class="btn btn--primary button--atc btn-add-to-cart js-add-to-cart">Add to cart</a>
<button class="btn btn-cta btn-cta--sold-out">Sold Out CTA</button>
<button class="btn btn-cta btn-cta--primary btn-cta--checkout"> {% include 'icon-lock' %} <input type="submit" class="input--checkout" name="checkout" value="Checkout" /> </button>