P01 - Style Guide Template

Interactive Elements

In-text link

CSS Selector:

.intext-link

Sample code:

<class="intext-link" href="#">Intext link</a>

Rendered element:

Intext link

Navigation Link

CSS selector:

.button-nav

Sample code:

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

Rendered element:

Default Button

Submit/Reset Buttons

CSS Selector:

.submit-reset-button

Sample code:

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

Rendered element:

Submit/Reset Button

Text Input Field with Label

CSS Selector:

#form-textInput

Sample code:

<label for="form-textInput'>Text Input:</label> <input type="text" id="form-textInput name="form-textInput" placeholder="Text Input">

Rendered element:

Radio Button with Label

CSS Selector:

#form-radioButton

Sample code:

<label for="form-radioButton'>Select an Option:</label> <type="radio" id="form-radioButton" name="form-radioButton" value="Option 1"> Option 1 <type="radio" id="form-radioButton" name="form-radioButton" value="Option 2"> Option 2

Rendered element:

Image as a Link

CSS Selector:

.img

Sample Code:

<a href="http://sfu.ca"> <src="img/robot.jpg" alt="A toy robot with a menacing expression."> </a>

Rendered element:

Text Elements

Headings

CSS Selector:

.heading

Sample Code:

<h2 class="heading">Heading 2</h2> <h3 class="heading">Heading 3</h3> <h4 class="heading">Heading 4</h4> <h5 class="heading">Heading 5</h5>

Rendered element:

Heading 2

Heading 3

Heading 4

Heading 5

Paragraphs

CSS Selector:

.paragraph

Sample Code:

<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna at purus placerat gravida. Vivamus at elementum metus. Donec a metus enim. Fusce sodales eros sed mi finibus lacinia. Integer egestas ex et nisl posuere, id interdum sapien imperdiet. Aliquam erat volutpat. Aliquam in massa quis orci feugiat tristique.</p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed id urna at purus placerat gravida. Vivamus at elementum metus. Donec a metus enim. Fusce sodales eros sed mi finibus lacinia. Integer egestas ex et nisl posuere, id interdum sapien imperdiet. Aliquam erat volutpat. Aliquam in massa quis orci feugiat tristique.

Interactive Elements

In-text link

CSS Selector:

Sample code:

Rendered element:

Navigation Link

CSS selector:

Sample code:

Rendered element:

Submit/Reset Buttons

CSS Selector:

Sample code:

Rendered element:

Text Input Field with Label

CSS Selector:

Sample code:

Rendered element:

Radio Button with Label

CSS Selector:

Sample code:

Rendered element:

Select an option

Image as a Link

CSS Selector:

Sample Code:

Rendered element:

Text Elements

Headings

CSS Selector:

Sample Code:

Rendered element:

Heading 2

Heading 3

Heading 4

Heading 5

Paragraphs

CSS Selector:

Sample Code:

Numbered Lists

Combined Elements

Main Navigation

Product/Service Listing

Payment Form

Checkout Cart

Citations