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
- Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tempora, ipsa?
- Tempore id maxime eius hic distinctio libero, blanditiis amet natus.
-
Nested bullet List
- Lorem ipsum dolor sit amet, consectetur.
- Voluptatem quaerat odit minus illo perferendis.
- Error explicabo, vitae repellat facilis voluptatum!
- Maiores rem facilis laborum commodi laboriosam minus asperiores et delectus.
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