Sample Content Boxes
The following content boxes are styled and ready for use in your Metamorphic website.
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.
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
- 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
Roman Numberal 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
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
Sidebar Navigation v.2
Icon Navigation
Products
Services
About Us
ContactConnect With Us
Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem.
Newsletter Signup
Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu.