Text Intro Big is a Large Serif Heading

Heading 1 is the most commonly used heading

Heading 2 is a serif font

Heading 3 can be used for a page with many sections

Heading 4 is often used for the same purpose as heading 3

Heading 5 is the smallest heading

This paragraph must be longer than the embedded links over there to the right, Otherwise it looks very strange. This is why it is best to really get all of your text on the page before mucking around with visual styles and alignment.

Heading 5 again with a paragraph to follow

This paragraph is contained within a green box because we are using the "text_callout_green" style. The box will fill the entire width of the main body of the page. The backgroun color is: E5EEEB.

This paragraph is contained within a yellow box using the "text_callout_yellow" style. The box will fill the right 50% of the main body of the page. The background color is: FFF5E0.

This paragraph of text should be longer than the contents of the yellow box over there to the right. Otherwise it looks very strange to have this blank space after the paragraph. So make sure you fill the contents to match the layout of the page.

You can always use more than one class to combine styles.

You can also change the yellow box by adding colors to the class; red, blue, grey, violet, brown, or white. You can also make any of these smaller, filling 30% of the content area, by adding "thirty" to the class. The example to the right uses ""text_callout yellow red thirty".

You can use "text_callout_red". Link text will automatically match the color.  Background color is F4E0DF. 

or "text_callout_blue" with this link text and background color is: D9E3E9.

or "text_callout_grey" with this link text and background color is: eee.

or "text_callout_violet" with this link text and background color is: DFDCE8.

or "text_callout_brown" with this link text and background color is: E7E1DD.

"text_callout_green yellow" can be used to create a long yellow box.

You can also use "text_callout_white" to make a box on the page that floats over to the right like the yellow one. I can use this space to show an example of the code you see over to the left there.

<ul class="pdf">
<li><a href="#">Anthem Blue Cross Group Membership Change Form</a><br /></li>

<li class="doc"><a href="#" target="_self">Anthem Blue Cross Wellpoint Rx Enrollment Form</a><br />Feel free to add further details to describe the link.</li>

<li class="xls"><a href="#">Anthem Blue Cross Prescription Claim Form</a></li>

<li class="bullet"><a href="#">Link1</a></li>
<li class="bullet"><a href="#">Link2</a></li>
<li class="bullet"><a href="#">Link3</a></li>

<li class="vid"><a href="#">Check out our YouTube video</a></li>

<li class="pics"><a href="#">See the slide show</a></li>

<li class="article"><a href="#">Read this article</a></li>
</ul>

Here are a few more styles to use:

Use the "pdf" class to an ordered OR unordered list to display pdf icons instead of bullets. You can also apply the "doc", "xls", "vid", "pics" or "article" class to a single item within that list if you need it:

Two Column Text Layout

Three Column Text Layout