Panels

Panels can be used within the main content area or within the sidebar. The markup is the same for both locations. When used in the sidebar, it is recommended that only .panel-standout and .panel-default be used.

The .panel-standout class can be used in conjunction with an optional .highlight class to add the triangle embellishment to the standout panel.

A panel consists of two parts a .panel-heading and .panel-body. .panel-heading can accept heading tags h2, h3, h4, or h5 headings. It can also use an icon from the icon library. To add an icon insert a span with the appropriate icon class name.

.panel-heading can also make use of an .options div. The .options div was created to hold extra controls like buttons, tabs, dropdown menus or other controls not existing yet. Content placed within the .options container will be floated to the right of the panel

Also optional in the .panel-heading is the use of icons left of the tile. The icon is purely optional and provided as a convenience.

NOTE: Buttons are not supported in panels used in the sidebar.

Examples:

Panel (Standout Highlight)

button

Panel Body

Panel (Standout)

button

Panel Body

Panel (Overstated)

button

Panel Body

Panel (Default)

button

Panel Body

Panel (Understated)

button

Panel Body

Source Code:

<div class="panel panel-standout highlight">
    <div class="panel-heading">
        <h2><span class="ca-gov-icon-info"></span> Panel (Standout Highlight)</h2>
        <div class="options">
            <a href="" class="btn btn-default">button</a>
        </div>
    </div>
    <div class="panel-body">
        Panel Body
    </div>
</div>

<div class="panel panel-standout">
    <div class="panel-heading">
        <h2><span class="ca-gov-icon-info"></span> Panel (Standout)</h2>
        <div class="options">
            <a href="" class="btn btn-default">button</a>
        </div>
    </div>
    <div class="panel-body">
        Panel Body
    </div>
</div>

<div class="panel panel-overstated">
    <div class="panel-heading">
        <h3><span class="ca-gov-icon-info"></span> Panel (Overstated)</h3>
        <div class="options">
            <a href="" class="btn btn-default">button</a>
        </div>
    </div>
    <div class="panel-body">
        Panel Body
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <h4><span class="ca-gov-icon-info"></span> Panel (Default)</h4>
        <div class="options">
            <a href="" class="btn btn-default">button</a>
        </div>
    </div>
    <div class="panel-body">
        Panel Body
    </div>
</div>

<div class="panel panel-understated">
    <div class="panel-heading">
        <h4><span class="ca-gov-icon-info"></span> Panel (Understated)</h4>
        <div class="options">
            <a href="" class="btn btn-default">button</a>
        </div>
    </div>
    <div class="panel-body">
        Panel Body
    </div>
</div>

Example:

Panel (Standout Highlight)

Use .highlight class with .panel-standout for triangle effect. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Panel (Standout)

Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.

Panel (Default)

Source Code:

<div class="panel panel-standout highlight">
    <div class="panel-heading">
        <h2><span class="ca-gov-icon-info"></span> Panel (Standout Highlight)</h2>
    </div>
    <div class="panel-body">
        <p>Use <code>.highlight</code> class with <code>.panel-standout</code> for triangle effect. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
</div>

<div class="panel panel-standout">
    <div class="panel-heading">
        <h4><span class="ca-gov-icon-info"></span> Panel (Standout)</h4>
    </div>
    <div class="panel-body">
        <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
</div>

<div class="panel panel-default">
    <div class="panel-heading">
        <h4><span class="ca-gov-icon-info"></span> Panel (Default)</h4>
    </div>
    <div class="panel-body">
        <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Curabitur blandit tempus porttitor. Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
    </div>
</div>