Sample Content Boxes

The following content boxes are styled and ready for use in your SmallBiz website.

To place your content in this style of container, use the "boxwhite" class.
To place your content in this style of container, use the "boxgrey" class.
To place your content in this style of container, use the "boxblue" class.
To place your content in this style of container, use the "boxyellow" class.
To place your content in this style of container, use the "boxred" class.

CSS3 Rounded Corners

For browsers that support CSS3 rounded corners, you can round content boxes simply by adding the class of "rounded". CSS3 rounded corners are not visible in Internet Exporer prior to version 9.0.

To place your content in this style of container, use the "boxwhite" class.
To place your content in this style of container, use the "boxgrey" class.
To place your content in this style of container, use the "boxblue" class.
To place your content in this style of container, use the "boxyellow" class.
To place your content in this style of container, use the "boxred" class.

960 Grid System Examples

NOTE: All the grid examples on this page are within a 9 column content area (the sidebar on this page is 3 columns (grid_3). So if your actual site is using a different content area configuration, you will need to adjust these examples accordingly. (for example, if your content area is grid_8, then all the examples below must add up to 8 instead of 9 as shown)

 

This is class="grid_4 alpha"

The alpha class removes the left padding from the container so it fits within the main 9-column container (3 columns for the sidebar, 9 for the content).

This is class="grid_5 omega"

The omega class removes the right padding from the container so it fits within the main 9-column container (3 columns for the sidebar, 9 for the content).

This is class="grid_4 alpha"

Within the "grid_4 alpha" div, there is also a div with the "boxred rounded" class applied. See how we combined the content boxes with the 960 grid? Cool stuff.

This is class="grid_5 omega"

The headline above is the normal H3 tag with the "boxblue rounded" class applied. See how you can apply the content box classes to all kinds of elements?

Here's a paragraph with the "boxyellow" class applied, but no rounded corners.

It's a good idea to 'clear' your floats so your content lines up properly. Occasionally you might have a div that gets stuck on another one and won't line up with the left margin. You can 'clear' the left float by using this code:

<div class="clear"></div>

More Content Examples

This is class="boxred rounded"

Within the "grid_3 alpha" div, there is also a div with the "boxred rounded" class applied. See how we combined the content boxes with the 960 grid? Cool stuff.

This is class="boxyellow rounded"

Still within the "grid_3 alpha" div, this is a div with the "boxyellow rounded" class applied.

This is class="grid_6 omega"

The headline above is the normal H3 tag.

More content here

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.

Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.

More content here

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.

Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.

More content here

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.

Same as Above just Flipped

This is class="grid_6 alpha"

The headline above is the normal H3 tag. See how the alpha and omega classes were switched as well?

More content here

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.

Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.

More content here

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.

Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.

More content here

Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.

This is class="grid_3 omega"

This is class="boxwhite rounded"

Within the "grid_3 omega" div, there is also a div with the "boxwhite rounded" class applied. See how we combined the content boxes with the 960 grid? Cool stuff.

This is class="boxyellow rounded"

Still within the "grid_3 omega" div, this is a div with the "boxyellow rounded" class applied.

Formatted Lists

Here are the samples of built-in formatted lists.

Dotted List

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Numbered List

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit
  2. Cras volutpat ante nec enim tempus vulputate
  3. Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Roman Numberal List

  1. Lorem ipsum dolor sit amet, consectetur adipiscing elit
  2. Cras volutpat ante nec enim tempus vulputate
  3. Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Green Checkmarks v.1

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Green Checkmarks v.2

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Green Checkmarks v.3

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Blue Checkmarks

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Green Checkbox Style

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Blue Checkbox Style

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Orange Checkbox Style

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Stop Style v.1

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Stop Style v.2

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Stop Style v.3

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Stop Style v.4

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Stop Style v.5

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Warning Style

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Green Plus Sign

  • Lorem ipsum dolor sit amet, consectetur adipiscing elit
  • Cras volutpat ante nec enim tempus vulputate
  • Proin ligula nibh, hendrerit nec imperdiet semper, mollis non leo

Portfolio Pages