P01 - Style Guide Template

A template you can use to start building out your own style guides with.

Interactive Elements

In-text link

This is an in-text link

Sample code:

<a href="http://google.com">This is an in-text link</a>

Navigation Link

CSS selector:

.button-nav

Sample code:

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

Rendered element:

Default Button

Submit/Reset Buttons

Text Input Field with Label


Radio Button with Label

Image as a Link

screenshot from Pokemon

this is an image

Text Elements

Headings

Heading level 1

Heading level 2

Heading level 3

Heading level 4

Paragraphs

This is a paragraph

Numbered Lists

Combined Elements

Main Navigation

Product/Service Listing

Payment Form

Checkout Cart

Citations