Element Test Page

This is something I have played with on and off when building websites for clients. The idea is to provide a single unpublished post that can be used as style reference when writing their own posts. For the most part it is ignored and merely serves as a way for me to make sure I have covered all the bases within the CSS.

I am pretty sure much of this example was pinched from someone else but I have no idea where or when, so apologies and thanks. Please feel free to steel from here and let me know if there are elements which would can be added.

Paragraphs & boxes

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.

Two column text

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. 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. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Three column text

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. 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. 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.

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.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

quiet

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.

loud

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

highlight

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

added

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

removed

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

blockquote

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.

---

Lists

• Unordered list test
• Another list element. Lorem ipsum dolor sit amet, consectetur adipisicing elit.
• Yet another element in the list
• Some long text. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Lorem ipsum dolor sit amet, consectetur adipisicing elit.

1. Ordered list test
2. Another list element
3. Yet another element in the list

Indented List

1. List element
2. Here's a nested unordered list
   • Nested Unordered list
   • Nested ordered list
     1. The first
     2. And the second
3. Ordered List item
4. Nested Ordered list
   1. Some point
   2. Nested Unordered list
      • The first
      • And the second

definition list dt

definition list dd

Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit

Lorem ipsum dolor sit amet, consectetur adipisicing elit adipisicing elit adipisicing elit

---

Headings

H1: Lorem ipsum dolor sit amet

H2: Lorem ipsum dolor sit amet,

H3: Lorem ipsum dolor sit amet,

H4: Lorem ipsum dolor sit amet,

H5: Lorem ipsum dolor sit amet,

H6: Lorem ipsum dolor sit amet,

Misc Elements

<strong>
<del> deleted
<dfn> dfn
<em> emphasis

links

<a> anchor
<a> a + href

Links as headings

Heading 1

Heading 2

Heading 3

Heading 4

Heading 5

Heading 6

 

<abbr> abbr - extended text when mouseover.
<acronym> acronym - extended text when mouseover.

<address>
Donald Duck
Box 555
Disneyland

Tables

Table Header One

A standard test table with a caption, tr, td elements

TD One	TD Two
TD colspan 2

Table Header Two

A test table with a thead, tfoot, and tbody elements

TD One	TD Two
TD One	TD Two
TD One	TD Two
TD One	TD Two
tfoot footer

<pre>
    pre  space1
    pre    space2
    pre tab

<code> Not indented indent1 indent1 indent2 indent3</code>