Panels

Think of panels as "boxes" for content. They don't take much markup and are powerful design components.

Here's a simple panel. This one simply has a paragraph inside of it.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor, aperiam.

A Heading

And here's a panel with a heading. These headings can also have heading tags (h1-h6) though they don't have to. This one, for example, has no heading tags at all.

Panel Heading

This heading has h3 tags with the class of panel-title.

Use heading tags (h2, h3, h4 etc) inside of the panel headings if you'd like your heading font to have serrifs. Otherwise, don't worry about any heading tags at all. It's mostly a matter of style.

Panel Heading

This heading is inside of h2 tags with the class of panel-title.

As you can see, the tags used inside of the panel-title class all look the same. Then why use one over another? you may be asking... For semantic, SEO purposes.

This is a panel-success panel

This panel has the "success" color. Nifty ey?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, odit eaque nostrum officiis ipsum maxime sit porro mollitia obcaecati doloremque.

This is a panel-info panel

This panel has the "info" color. Nifty ey?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, odit eaque nostrum officiis ipsum maxime sit porro mollitia obcaecati doloremque.

This is a panel-warning panel

This panel has the "warning" color. Nifty ey?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, odit eaque nostrum officiis ipsum maxime sit porro mollitia obcaecati doloremque.

This is a panel-danger panel

This panel has the "danger" color. Nifty ey?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, odit eaque nostrum officiis ipsum maxime sit porro mollitia obcaecati doloremque.

This is a panel-primary panel

This panel has the "primary" color. Nifty ey?

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, odit eaque nostrum officiis ipsum maxime sit porro mollitia obcaecati doloremque.

This is a panel-default panel

This panel has the default color, or lack there of. Certainly the most neutral of them all.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Architecto, odit eaque nostrum officiis ipsum maxime sit porro.