Typography Code Snippets
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.
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)
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.
topHeadings
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
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.
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
Buttons and Links
Sample Link — a.borderColor1
Sample Link — a.borderColor2
Print — a.print
a.smButton bkgroundColor1
Small Buttona.medButton bkgroundColor1
Medium Buttona.lgButton bkgroundColor1
This is a Large Buttona.smButton bkgroundColor2
Flexible in length!a.medButton bkgroundColor2
Styles are not color dependenta.lgButton bkgroundRed
You can have any background color!a.spButtonSquare
what's NEXT?a.spButtonRound
let's BEGINa.spButtonSquare
START now!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.
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.
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 |
Styled Boxes
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.