Page Styles

This is class “kicker”. It is bigger and is meant to lead off long pages or perhaps very simple info. If you want content to stretch across the whole width of the page, use a div of “fullwidth” like the h5 header below.

h5 class “marketing”

Div with class “hangingindent” will create an absolute positioned block. Size of box is 350px. Text should wrap at 350px as well.

This text has no special styling around it. If you apply a <strong> tag then your text will turn into your spot color. If you apply a <span class=”black”> tag around text, your text will darken to black. If you apply a <b>tag then your text will darken in whichever color currently exists. If you apply an <em> or <i> tag then your text will italicize Here is a bit more plain jane normal text.

Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent lobortis, nulla a scelerisque dapibus, dolor arcu porttitor ipsum, vitae euismod diam dui nec nisi. Donec nec magna augue. Morbi et dui nec est ultricies vestibulum in ut lacus. In lacus lorem, aliquam nec semper nec, faucibus non magna. Duis sagittis metus eget nisl pretium sit amet malesuada augue iaculis. Nunc nec lorem magna, id vestibulum lorem. Pellentesque consequat est non sem mattis sed tincidunt lacus euismod. Nullam id tincidunt velit. Morbi et lorem eu eros semper gravida. Sed dictum, elit ut rutrum sollicitudin, eros tortor blandit ipsum, ac consequat ipsum lacus eu magna. Aliquam vel ante ac ante rhoncus commodo. Vivamus dapibus semper laoreet. Integer tempus auctor magna, nec hendrerit leo tincidunt a. Aenean justo nunc, molestie cursus ornare at, congue ut est. Duis iaculis fringilla lorem, at convallis ipsum molestie id. Maecenas rutrum, ipsum vitae vestibulum consequat, leo enim mollis augue, a aliquet dolor risus nec orci. Vivamus condimentum, ante hendrerit euismod dictum, nunc sapien dictum augue, at egestas quam tortor id orci. Nullam euismod orci neque. Quisque purus tellus, consequat nec dignissim non, consectetur non neque.

This is an h5 element with a class of marketing. Has underline.

If you want small Lucida/Verdana text, use class “agate”. Here it is being used in a p tag. This paragraph has a div of “hangingcolumn2” around it. That way it sits just to the left of the main column (good for captions).

h5 elements have space above them as part of the style. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pulvinar pretium quam, et dictum ipsum accumsan eget. Aenean nec nunc turpis. Etiam feugiat nunc vitae nisl porta non eleifend massa tincidunt. Sed eget sapien eget diam porttitor vestibulum nec vitae velit. Phasellus venenatis lectus eget magna vestibulum mattis gravida ipsum venenatis. Pellentesque pellentesque risus nec turpis volutpat dignissim. Phasellus molestie rutrum eros eu faucibus. Proin hendrerit, dolor a sollicitudin mattis, orci mauris dictum augue, eget faucibus turpis nunc id quam. Sed venenatis congue tortor, at egestas mi blandit eu. Cras mollis adipiscing accumsan. Ut enim enim, euismod in euismod in, iaculis a massa.

This is an h5 element in a hangingindent div

h6 tags are the lowest in the header hierarchy. They work well as subheaders over paragraphs. Back to default text in default position. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut pulvinar pretium quam, et dictum ipsum accumsan eget. Aenean nec nunc turpis. Etiam feugiat nunc vitae nisl porta non eleifend massa tincidunt. Sed eget sapien eget diam porttitor vestibulum nec vitae velit. Phasellus venenatis lectus eget magna vestibulum mattis gravida ipsum venenatis. Pellentesque pellentesque risus nec turpis volutpat dignissim. Phasellus molestie rutrum eros eu faucibus. Proin hendrerit, dolor a sollicitudin mattis, orci mauris dictum augue, eget faucibus turpis nunc id quam. Sed venenatis congue tortor, at egestas mi blandit eu. Cras mollis adipiscing accumsan. Ut enim enim, euismod in euismod in, iaculis a massa.


165px wide column. Use div “hangingcolumn1” to place content in this first column.

This is an h6 element

Back to standard text. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent lobortis, nulla a scelerisque dapibus, dolor arcu porttitor ipsum, vitae euismod diam dui nec nisi. Donec nec magna augue. Morbi et dui nec est ultricies vestibulum in ut lacus. In lacus lorem, aliquam nec semper nec, faucibus non magna. Duis sagittis metus eget nisl pretium sit amet malesuada augue iaculis. Nunc nec lorem magna, id vestibulum lorem. Pellentesque consequat est non sem mattis sed tincidunt lacus euismod. Nullam id tincidunt velit. Morbi et lorem eu eros semper gravida. Sed dictum, elit ut rutrum sollicitudin, eros tortor blandit ipsum, ac consequat ipsum lacus eu magna. Aliquam vel ante ac ante rhoncus commodo. Vivamus dapibus semper laoreet. Integer tempus auctor magna, nec hendrerit leo tincidunt a. Aenean justo nunc, molestie cursus ornare at, congue ut est. Duis iaculis fringilla lorem, at convallis ipsum molestie id. Maecenas rutrum, ipsum vitae vestibulum consequat, leo enim mollis augue, a aliquet dolor risus nec orci. Vivamus condimentum, ante hendrerit euismod dictum, nunc sapien dictum augue, at egestas quam tortor id orci. Nullam euismod orci neque. Quisque purus tellus, consequat nec dignissim non, consectetur non neque.


Floating styles. This is an h6.

Praesent lobortis, nulla a scelerisque dapibus, dolor arcu porttitor ipsum, vitae euismod diam dui nec nisi. Donec nec magna augue. Morbi et dui nec est ultricies vestibulum in ut lacus. In lacus lorem, aliquam nec semper nec, faucibus non magna.

This is a floating left column with a class of “onecolumn”. This floating column works best within a div of full-width. It can have another next to it.

This is a floating left column with a class of “onecolumn”. This floating column works best within a full-width. It can have another next to it.

This is a floating left column with a class of “onecolumn”. This floating column works best within a full-width. It can have another next to it.

This is a floating left column with a class of “onecolumn”. This floating column works best within a full-width. It can have another next to it.

The last column has an inline style that applies a width of 120 pixels to the onecolumn div.

Another h6

Blockquoted text might be interesting to see here and especially if it runs for a little bit, perhaps it’ll be more visible where the end point is.

This is the blockquoted text. Not too much indent.

Ordered list starts below. The <ol> has a class of “list” and “indent”. Otherwise lists don’t have bullets or indention.

  1. First
  2. Second
  3. Third

Start of paragraph with an unordered list.

  • First
  • Second
  • Third

This is text with no styles applied


T F m
February 19, 2011