Content boxes View all kinds of Content boxes examples below.

Content boxes

Content boxes are used to better organize your content and provide a visual consistency to your app.

Basic structure

Below, you will find the basic structure needed to create a content box.

Title background colors

Change the content box title background ( .content-box-header ) by adding to it one of the color CSS helper classes listed below.

Alternate header

Use the example below to create a content box with a two-line header title.

Header icons

You can add icons to the content box header titles using the FontAwesome icons. For example to add a cog icon next to the title you need to use the following code <i class="glyph-icon icon-cog"></i>

Icons separator

To create a separator for the header title icon you need to wrap it inside an element with the .icon-separator CSS class.

Header buttons

You have the option to insert single buttons in the content boxes headers using the default button markup.

Header button groups

You can also include button groups in the content box headers using the markup below.

Separated buttons

The separated buttons have a lighter background color than the content box header.

Badges & Labels

Context boxes header can also contain badges and/or labels.

Alternate style

To create a top border content box example, like the ones below, you need to add the following CSS helper classes to the .conten-box wrapper: .border-top and border-red. To achieve different border colors, replace "-red" with "-blue", "-blue-alt", "-green", "-orange", etc

Button panes

To create a footer button pane add a div with the .button-pane CSS class after the .content-box-wrapper element. To create a button pane above the content wrapper, move the .button-pane element above the .content-box-wrapper in the DOM add .button-pane-top CSS class to it.

Boxes loading overlays

Add .refresh-button CSS class to the element that you want to trigger the content box loading overlay. You can control the overlay color using the data-theme="bg-green"> parameter. For lighter color data-theme parameter use data-style="light" and for darker ones, use data-style="dark". Opacity can be controlled using the data-opacity="80"> parameter. Accepted values are: 30, 60, 80, 100.

Toggle boxes

Add .toggle-button CSS class to the element that you want to trigger the content slide toggle.

Initially closed

Add .hide CSS class to the .content-box-wrapper element that you want to show on toggle trigger.

Hidden buttons

Add .hidden-button CSS class to the .content-box element to make the content box header elements that have the .label-hide CSS class, initially hidden and show them only on content box hover.

Closable boxes

Add .remove-button CSS class to the element that you want to trigger the content box remove. To control the animation used for the removal, use the data-animation="flipOutY" parameter. To learn more about the animation you can use, read the Animations documentation page.

Panels

Use the markup below to create content panels.