Style Guide

Navigation Button

CSS selector:

.main-nav

Sample code:

<a href="#" class="button">Default Button</a>

Rendered element:

Default Button

In-text link

CSS selector:

#intext-link

Sample code:

<a href="#" id="intext-link"> New Arrivals </a>

Rendered element:

Check out our New Arrivals, for whats new.

Submit Buttons

CSS selector:

.subscription-cta

Sample code:

<a href="#" class="submit-link"> Submit </a>

Rendered element:

Text Input Field

CSS selector:

.text-field
.text-field-item
.text-field-input

Sample code:

<form class="text-field"> <p> <label class="text-field-item"t> First Name </label> <input class="text-field-input" name="first" type"text" plaecholder="John"></p>

Rendered element:

Headings

CSS selector:

.header1

Sample code:

<h2 id="header1> HEADING LEVEL 01 </h2> <h2> Heading Level 02 </h2> <h3> Heading Level 02 </h3>

HEADING LEVEL ONE

Heading Level TWO

Heading Level THREE

Paragraphs

CSS selector:

n/a

Sample code:

<p> Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.... </p>

Rendered element:

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum

Bulleted Lists

CSS selector:

.featureList
.cross

Sample code:

<div class="item-info> <ul><li;> Product 001 </li></ul>

Rendered element:

Product OO1
Product OO2
Product OO3
Product OO4

Numbered Lists

CSS selector:

.bg-ol-list
bg-ol-item

Sample code:

<ol class="bg-ol-list"> <li class="bg-ol-item><span> 01 </span>

<p>In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out...</p></li></ul>

Rendered element:

01
In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out...
02
In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out...
03
In locavore voluptate assumenda. Non raw denim sapiente aute small batch fap. Raw denim cliche lo-fi umami cray incididunt sunt before they sold out...

Main Navigation

CSS selector:

.nav-main
.nav-main-heading
.nav-main-item

Sample code:

<nav class"main-nav"> <ul><li><a href="#combined_elements" class="nav-main-item">Shop<a></li></ul>

Rendered element:

Product Listing

CSS selector:

.product-img
.product-text
.fig-sub
.fig-price

Sample code:

<figure class="product-listing"> <a href="item.html"> <img src="../assets/catalogue-images/sun/sun-set-7.0.jpg" alt="Ogle Sunglasses"> </a> <figcaption><a href="item.html"> THEODORE </a><a href="item.html"> $275.00 </a></figcaption>

Rendered element:

Color Palette

#ffffff

#5F9EA0

#000000

Grid Structure

Sample code:

<div class="grid-1of4"> <p>1/4</p> </div>

Rendered element:

1/2