Style demo of some common XHTML elements.

Some Content Elements

Heading Two

Heading Three

Heading Four

A link, ACRONYM, highlight and deleted text.

This is a blockquote with author information included. If you look at the source, you can see the author info gets its style from a combination of generic classes.
snop on March 19th, 2006

  • Unordered List using “arrow” class
  • Uses a custom bullet to make items pop
  1. Ordered List
  2. Another bullet item

Big links class that can be used for large, clickable sections.

Big Links

Tables and form layout demo because data is good.

You can see this form layout used on the Contact page and also for the comments form.

Tables and Forms

Table Caption: A description could go here
Application Description Version
Product Name Some Description text 1.0
Different Product Name Some Longer Description text that wraps around to show vertical alignment. Some Longer Description text that wraps around to show vertical alignment 2.0
Product Name Some Description text 3.0





Column Layout Demo. In this case, they’ve been confined to a 75% width container to allow space for this meta column, but it’s no problem to have the columns expand across 100% of the template width.

Column Layout

Below are some examples of how the columns in this template can be combined and positioned.

3 Columns with Highlight

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.

2 Columns

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus.

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.

2 Columns, using Big Links

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.

Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.

1 Column

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Mauris magna. Suspendisse accumsan elit non tellus. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui. Curabitur eros justo, malesuada convallis, sagittis vitae, convallis sit amet, lectus. Fusce tristique mattis ante. Aenean facilisis euismod dui.