Style Guide
Colours
Elements in context
This standard paragraph features HTML elements in context. This is an example of a link and these are some of the most common inline styles such as strong and emphasis. This is strong and emphasis and emphasis and strong to check fonts. It also shows examples of sub text and sup text. Here we can see some inline code. This is the ABBR element. This is the b element. This is the cite element. This is the code element. This is the del element. This is the dfn element. This is the em element. This is the i element. This is the ins element. This is the kbd element. This is the mark element. This is the samp element. This is the small element. This is the var element.
This is a H1 heading that is quite long to check the wrapping and line-height
This first paragraph has an ‘lead’ class applied and should demonstrate visual hierarchy. The following paragraphs are simply to show the heading tags in context so use Lorem Ipsum filler text. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus.
This is a H2 heading that is quite long to check the wrapping and line-height
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
This is a H3 heading that is quite long to check the wrapping and line-height
This image has a class of ‘right’ applied and should be floated right. Praesent mattis, massa quis luctus fermentum, turpis mi volutpat justo, eu volutpat enim diam eget metus. Maecenas ornare tortor. Donec sed tellus eget sapien fringilla nonummy. Mauris a ante. Suspendisse quam sem, consequat at, commodo vitae, feugiat in, nunc. Morbi imperdiet augue quis tellus.
This piece of text has been wrapped in a <small> tag.
This is a H4 heading
I like to keep typography simple and limit headings to four sizes, so <H5> & <H6> often get styled the same as <H4>.
This is a H5 heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
This is a H6 heading
Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Nullam dignissim convallis est. Quisque aliquam. Donec faucibus. Nunc iaculis suscipit dui. Nam sit amet sem. Aliquam libero nisi, imperdiet at, tincidunt nec, gravida vehicula, nisl.
H1 with small text and a link
H2 with small text and a link
H3 with small text and a link
H4 with small text and a link
H5 with small text and a link
H6 with small text and a link
Lists
Definition List
- Definition List Title 1
- This is a definition list division.
- Definition List Title 1
- This is a definition list division.
- Definition List Title 1
- This is a definition list division.
Ordered List
- List Item 1
- List Item 2
- List Item 3
- Sub List Item 1
- Sub List Item 2
- Sub List Item 3
- List Item 4
- List Item 5
- List Item 6
Unordered List
- List Item 1
- List Item 2
- List Item 3
- Sub List Item 1
- Sub List Item 2
- Sub List Item 3
- List Item 4
- List Item 5
- List Item 6
An example of a blockquote
“This is a real handy page of HTML elements”
~ No One (Ever)
Buttons
Forms
(markup from Gravity Forms plugin)
Tables
(markup from Tablepress plugin)
| Column 1 | Column 2 | Column 3 |
|---|---|---|
| Col 1 Footer | Col 2 Footer | Col 3 Footer |
| 100 | 200 | 300 |
| 1000 | 2000 | 3000 |
| AAAA | BBBB | CCCC |