IAT 339: P03

Style Guide

In-text link

CSS selector:

.in-text-link

Sample code:

<a href="#" class="in-text-link">In-text link</a>

Rendered element:

In-text link

Navigation Button

CSS selector:

.button-nav

Sample code:

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

Rendered element:

CTA Button

CSS selector:

.cta-button

Sample code:

<a href="#" class="cta-button">CTA Button</a>

Rendered element:

CTA Button

Text Input Field

CSS selector:

#text-input-field, .input-field-label

Sample code:

<form>
 <label for="text-input-field" class="input-field-label">Label</label>
 <input type="text" id="text-input-field" placeholder="i.e. Text Sample">
</form>

Rendered element:

H1 Heading

CSS selector:

h1

Sample code:

<h1>Heading 1</h1>

Rendered element:

Heading 1

H2 Heading

CSS selector:

h2

Sample code:

<h2>Heading 2</h2>

Rendered element:

Heading 2

H3 Heading

CSS selector:

h3

Sample code:

<h3>Heading 3</h3>

Rendered element:

Heading 3

H4 Heading

CSS selector:

h4

Sample code:

<h4>Heading 4</h4>

Rendered element:

Heading 4

Paragraphs

CSS selector:

p

Sample code:

<p>Paragraph</p>

Rendered element:

Paragraph

Bulleted Lists

CSS selector:

ul

Sample code:

<ul>
 <li>Bullet list 1</li>
 <li>Bullet list 2</li>
 <li>Bullet list 3</li>
</ul>

Rendered element:

Numbered Lists

CSS selector:

ol

Sample code:

<ol>
 <li>Bullet list 1</li>
 <li>Bullet list 2</li>
 <li>Bullet list 3</li>
</ol>

Rendered element:

  1. Numbered list 1
  2. Numbered list 2
  3. Numbered list 3

Main Navigation

Project Listing

Rendered element:

International Co-op project image - person looking deeply out on top of a mountain

01

Company

Category

Website Colour Swatches