Style guide

Page title (h1)

The purpose of this page it to provide a standard template for style guides. It contains most of the major elements in a page such as links, lists and a form. You can test visited links here.

  • This is a standard unordered list
  • List Item 2 (strong)
  • List Item 3 (emphasis)
  • List Item 4 is an example of a long list item, hopefully it should go over two lines so you can see the effect of line-height versus li margin.

Either through HTML or javascript you can apply a style class selectors to differentiate different types of links, this for example has been given an “email” class selector,

Sub heading (h2)

Floated right image

Floated to the right is an example image. It does not have a caption. Let’s pad this paragraph a little, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit. Suspendisse bibendum, quam a facilisis tristique, neque lorem vulputate libero, eget fermentum arcu quam nec tortor. Mauris a nibh vitae turpis varius hendrerit. Donec eget nulla. Fusce auctor dapibus eros.

This link has been given a “pdf” class selector, download the PDF.

Sub heading (h3)

Floated right image

Caption text

Floated to the left is an example image. It does have a caption. Let’s pad this paragraph a little, Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit. Suspendisse bibendum, quam a facilisis tristique, neque lorem vulputate libero, eget fermentum arcu quam nec tortor. Mauris a nibh vitae turpis varius hendrerit. Donec eget nulla. Fusce auctor dapibus eros.

Sub heading (h4)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit. Suspendisse bibendum, quam a facilisis tristique, neque lorem vulputate libero, eget fermentum arcu quam nec tortor.

A pull quote (also known as a lift-out quote or a call-out).

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum hendrerit. Suspendisse bibendum, quam a facilisis tristique, neque lorem vulputate libero, eget fermentum arcu quam nec tortor. Mauris a nibh vitae turpis varius hendrerit. Donec eget nulla. Fusce auctor dapibus eros.

Sub heading (h5)

Here is an ordered list.

  1. List Item 1
  2. List Item 2
  3. List Item 3

Table Styling (h2)

Below is an example of a semantically correct table.

Table Caption (caption)
Heading 1 (thead th) Heading 2 Heading 3
Row Heading (tbody th) Cell 2 Cell 3
Row Heading (tbody th) Cell 2 Cell 3
Row Heading (tbody th) Cell 2 Cell 3
Row Heading (tbody th) Cell 2 Cell 3
Row Heading (tbody th) Cell 2 Cell 3

Form Styling (h2)

Below is an example of a semantically correct form. Developers differ on preferred structure for their tables, personally, I like to wrap my form input in the label tag, this gives a nice way to keep the label and input linked stylistically.

Fieldset legend.

Comments for this fieldset. A place to give directions, error messages and encouragement. Error messages can also be given next to the form input.