Style Guide Elements Template

Use this HTML file as a starting point for your living style guide. This is not an exhaustive list of elements. Choose the elements you need; delete those you don't; add anything that's missing.

Write a master CSS stylesheet and link it to this page, and every page in your site. By doing this, multiple team members can work on separate HTML files and maintain design consistency, without writing over each other's work. If someone needs to add additional styles, they can create a separate CSS file and link that as well.

// COLOR PALETTE GOES HERE




// CUSTOM COMPONENTS GO HERE




// BUTTON STYLES

// HEADINGS

Heading 1 with a link

Heading 2 with a link

Heading 3 with a link

Heading 4 with a link

Heading 5 with a link
Heading 6 with a link

// BODY COPY

Lorem ipsum dolor sit amet, consectetur adipisicing 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.

// BLOCKQUOTE

Some sort of famous witty quote marked up with a <blockquote> and a child <p> element.

// COMPANY ADDRESS

Company Name, Inc.
811 7th Ave, Suite 700
Manhattan, NY 10019
USA

// HORIZONTAL RULE


// ORDERED LIST

  1. list item
  2. list item
  3. list item
  4. list item

// UNORDERED LIST

// FORM ELEMENTS

Form Fields

// DEFAULT IMAGE

Image alt text 3

// LINKED IMAGE

Image alt text 4

// TABLE

Table Caption
column column column
cell cell cell
cell cell cell
cell cell cell

// TEXT ELEMENTS

The a element example

The em element example

The small element example

The strong element example

The sub element example

The sup element example

The u element example

// BREADCRUMBS