Navigation Button

CSS selector:

.button-nav

Sample code:

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

Rendered element:

DEFAULT NAV BUTTON

In-text link

CSS selector:

.text-link

Sample code:

<a href="#" class="text-link">Default Text Link</a>

Rendered element:

Default In-text Link

Submit/Reset Buttons

CSS selector:

.button-submit

Sample code:

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

Rendered element:

Submit

CSS selector:

.button-reset

Sample code:

<a href="#" class="button-reset">Reset</a>

Rendered element:

Reset

Text Input Field

CSS selector:

input[type=text]#form-element

Sample code:

<label for="form-element">Full Name</label>
          <input id="form-element" type="text" placeholder="Text Input">

Rendered element:

Headings

CSS selector:

.main-header

Sample code:

<h1 class="main-header">Title</h1>

Rendered element:

Title

Secondary Headings

CSS selector:

.subheader1

Sample code:

<h2 class="subheader1">Secondary Title</h2>

Rendered element:

Subheader 1

Paragraphs

CSS selector:

Sample code:

<p>paragraph</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:

.bullet-list

Sample code:

<ul class="bullet-list">
          <li>item1</li>
          <li>item2</li>
          <li>item3</li></ul>

Rendered element:

item1
item2
item3

Numbered Lists

CSS selector:

.number-list

Sample code:

<ol class="number-list">
          <li>item1</li>
          <li>item2</li>
          <li>item3</li>
          </ol>

Rendered element:

item1
item2
item3

Main Navigation

CSS selector:

.main-nav

Sample code:

<nav class="main-nav">
          <ul>
          <li><a href="#">Default Nav Button1</a></li>
          <li><a href="#">Default Nav Button2</a></li>
          <li><a href="#">Default Nav Button3</a></li>
          <li><a href="#">Default Nav Button4</a></li>
          </ul>
          </nav>

Rendered element:

Product Listing

.prod-list

Sample code:

<div class="prod-list">
          <img src="img/products/apothecary-jar.jpg" class="item" alt="Apothecary Jar">
          </div>