Callout Boxes

Create a callout box (also known as a "hero") by adding the .hero class to a <div> element.

A hero is a simple callout box like this one. You might put a call-to-action or some noteworthy information here.

<div class="hero">
    A hero is a simple callout box like this one. You might put a call-to-action or some noteworthy information here.
</div>

Condensed Heroes

You can reduce the padding on a hero box by adding the .hero-condensed class.

For smaller spaces, you might prefer a hero with less padding like this one.

<div class="hero hero-condensed">
    For smaller spaces, you might prefer a hero with less padding like this one.
</div>

Background Colors

Add background color to a section (like the header and footer of this page) with the .bg class.

Backgrounds have no left or right padding, so add a .container inside the .bg or text will run from edge to edge in the browser.

<div class="bg">
    <div class="container">
        This section has a background color.
    </div>
</div>

Other Colors

For blue backgrounds (with white text), also include the .bg-blue class. You can add additional colors to suit your design.

Links may not be visible or have enough contrast on different colored backgrounds. You may need to add modified link styling for background color sections. You can test your design with the free, cross-platform Color Oracle app.

<div class="bg bg-blue">
    <div class="container">
        This section has a blue background.
    </div>
</div>

Condensed Backgrounds

For backgrounds with less padding at the top and bottom, add the .bg-condensed class.

<div class="bg bg-condensed">
    <div class="container">
        This section has a condensed background.
    </div>
</div>

Browser Support

Hero works in all modern browsers, and IE 6 and above.

Because IE8 and lower lack border-radius support, rounded corners on callout boxes only work on IE9 and higher.