Typography Code Snippets

Sample Image

Image Left - no border (img.left)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut. Phasellus ante lorem, ullamcorper sit amet semper eget, aliquet a quam. Vivamus ultrices aliquam magna, et tincidunt magna ultricies vitae. Nam nisl nisl, accumsan vel convallis sed, tincidunt sed ante. Sed imperdiet rutrum urna id sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut. Phasellus ante lorem, ullamcorper sit amet semper eget, aliquet a quam. Vivamus ultrices aliquam magna, et tincidunt magna ultricies vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut. Phasellus ante lorem, ullamcorper sit amet semper eget, aliquet a quam. Vivamus ultrices aliquam magna, et tincidunt magna ultricies vitae. Nam nisl nisl, accumsan vel convallis sed, tincidunt sed ante. Sed imperdiet rutrum urna id sagittis. Nam nisl nisl, accumsan vel convallis sed, tincidunt sed ante. Sed imperdiet rutrum urna id sagittis.


Sample Image

Image Right - small border (img.right smallBorder)

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut. Phasellus ante lorem, ullamcorper sit amet semper eget, aliquet a quam. Vivamus ultrices aliquam magna, et tincidunt magna ultricies vitae. Nam nisl nisl, accumsan vel convallis sed, tincidunt sed ante. Sed imperdiet rutrum urna id sagittis.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut. Phasellus ante lorem, ullamcorper sit amet semper eget, aliquet a quam. Vivamus ultrices aliquam magna, et tincidunt magna ultricies vitae. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut. Phasellus ante lorem, ullamcorper sit amet semper eget, aliquet a quam. Vivamus ultrices aliquam magna, et tincidunt magna ultricies vitae. Nam nisl nisl, accumsan vel convallis sed, tincidunt sed ante. Sed imperdiet rutrum urna id sagittis. Nam nisl nisl, accumsan vel convallis sed, tincidunt sed ante. Sed imperdiet rutrum urna id sagittis.


Image Center - large border (img.center largeBorder)


Sample Image

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut. Phasellus ante lorem, ullamcorper sit amet semper eget, aliquet a quam. Vivamus ultrices aliquam magna, et tincidunt magna ultricies vitae. Nam nisl nisl, accumsan vel convallis sed, tincidunt sed ante. Sed imperdiet rutrum urna id sagittis.

top

Headings

h1.pageTitle

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut. Phasellus ante lorem, ullamcorper sit amet semper eget, aliquet a quam. Vivamus ultrices aliquam magna, et tincidunt magna ultricies vitae. Nam nisl nisl, accumsan vel convallis sed, tincidunt sed ante. Sed imperdiet rutrum urna id sagittis.


h2.columnTitle color1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut.

h2.columnTitle color2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut.

h2.columnTitle2

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut.

h2.columnTitle1

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut. Phasellus ante lorem, ullamcorper sit amet semper eget, aliquet a quam.

Heading 1 - color1

Heading 2 - color2

Heading 3 - color1

Heading 4 - color2

Heading 5 - no color
Heading 6 - no color
top

Dropcaps

dropcapSquare bkgroundColor1

ALorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut.

dropcapCircle bkgroundColor1

1Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie.

dropcapSquare bkgroundColor2

BLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut.

dropcapCircle bkgroundColor2

2Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie.

dropcapSquare bkgroundGrey

CLorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut.

dropcapCircle bkgroundGrey

3Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi mattis aliquet libero at posuere. In aliquet tristique molestie.

top

Lists

ul.greyArrow

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

ul.smgreyArrow

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

ul.checkmark

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

ul.star

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

ul.square

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

ul.lgcircle

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

ul.smcircle

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4

ul.yellowStar

  • List Item 1
  • List Item 2
  • List Item 3
  • List Item 4
top

Buttons and Links


Sample Link — a.borderColor1

Sample Link — a.borderColor2

Help — a.help

Download — a.download

Print — a.print


a.smButton bkgroundColor1

Small Button

a.medButton bkgroundColor1

Medium Button

a.lgButton bkgroundColor1

This is a Large Button

a.smButton bkgroundColor2

Flexible in length!

a.medButton bkgroundColor2

Styles are not color dependent

a.lgButton bkgroundRed

You can have any background color!

a.spButtonSquare

what's NEXT?

a.spButtonRound

let's BEGIN

a.spButtonSquare

START now!
top

Block and Pull Quotes


This is a regular blockquote. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus.

This is blockquote.one_third quoteStyle1 grey. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus.

This is blockquote.one_fourth quoteStyle1 color2. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl.This is a Pull Quote with span.pullquoteRight color1. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut. Nunc dapibus turpis eu neque pharetra consequat.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Nunc dapibus turpis eu neque pharetra consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl.This is a Pull Quote with span.pullquoteLeft color2. Aliquam tempor gravida arcu, ac dignissim nisi consectetur ut.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Nunc dapibus turpis eu neque pharetra consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

top

Highlights


Lorem ipsum dolor sit amet, consectetur adipiscing elit. This is an example of span.highlight. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus.

Lorem This is an example of span.highlightGrey ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Here is span.highlightBlack. Nunc dapibus turpis eu neque pharetra consequat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

This is span.highlightColor2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Nunc dapibus turpis eu neque pharetra consequat. Here is span.highlightColor1. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae.

top

Tables


Heading 1 Heading 2 Heading 3 Heading 4 Heading 5
Section 1 Section 2 Section 3 Section 4 Section 5
Section 1 Section 2 Section 3 Section 4 Section 5
Section 1 Section 2 Section 3 Section 4 Section 5
Section 1 Section 2 Section 3 Section 4 Section 5
Section 1 Section 2 Section 3 Section 4 Section 5
Section 1 Section 2 Section 3 Section 4 Section 5
top

Styled Boxes


An example of div.successBox. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Nunc dapibus turpis eu neque pharetra consequat.
An example of div.errorBox. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Nunc dapibus turpis eu neque pharetra consequat.
An example of div.infoBox. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Nunc dapibus turpis eu neque pharetra consequat.
An example of div.warningBox. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Nunc dapibus turpis eu neque pharetra consequat.
An example of div.greyBox. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Nunc dapibus turpis eu neque pharetra consequat.
top

Dividers


hr.style1


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Nunc dapibus turpis eu neque pharetra consequat.


hr.style2


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Nunc dapibus turpis eu neque pharetra consequat.


hr.style3


This is an example of div.greyBkground. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Nunc dapibus turpis eu neque pharetra consequat.


Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Nunc dapibus turpis eu neque pharetra consequat.

This is an example of div.one_third leftborder. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Nunc dapibus turpis eu neque pharetra consequat.


This is an example of div.one_fourth rightborder. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam a purus est. Mauris eu dolor augue, in mattis quam. Quisque vitae augue at nulla euismod cursus. Suspendisse turpis lectus, dapibus quis imperdiet vel, porttitor volutpat nisl. Nunc dapibus turpis eu neque pharetra consequat.

top