Style Guide

Headings

Heading Example
<h1></h1>

Heading Level One
<h2></h2>

Heading Level Two
<h3></h3>

Heading Level Three
<h4></h4>

Heading Level Four
<h5></h5>
Heading Level Five
<h6></h6>
Heading Level Six
<h6 class="h1"></h6>
Should look like h1
<h5 class="h2"></h5>
Should look like h2
<h4 class="h3"></h4>

Should look like h3
<h3 class="h4"></h3>

Should look like h4
<h2 class="h5"></h2>

Should look like h5
<h1 class="h6"></h1>

Should look like h6

Paragraphs

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deserunt impedit ab sint, quaerat fugit nam eveniet laboriosam provident. Blanditiis doloribus obcaecati necessitatibus laboriosam nam officia harum similique rem omnis cumque?

Dolores commodi ullam, nemo nostrum optio sequi laudantium cum in facere repellat, pariatur atque sint! Fugit et, corporis autem consectetur. Et suscipit beatae sed, reiciendis numquam atque aliquam reprehenderit corrupti.

Lists

  1. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, ipsa?
  2. Tempore id maxime eius hic distinctio libero, blanditiis amet natus.
  3. Nested bullet List
    • Lorem ipsum dolor sit amet, consectetur.
    • Voluptatem quaerat odit minus illo perferendis.
    • Error explicabo, vitae repellat facilis voluptatum!
  4. Maiores rem facilis laborum commodi laboriosam minus asperiores et delectus.

Buttons

Link

Icons

{% include 'icon', which: 'x', size: 'sm' %}

xs
sm
md
lg
xl
xxl
xxxl

x

close

menu

search

account

cart

plus

minus

arrow-up

arrow-down

arrow-left

arrow-right

phone

email

clock

grid

list

share

facebook

facebook-color

twitter

twitter-color

instagram

youtube

pinterest

googleplus

tumblr