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, example@example.com
Sub heading (h2)
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)
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.
- List Item 1
- List Item 2
- List Item 3
Table Styling (h2)
Below is an example of a semantically correct table.
| 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.