Boxed layout options
Boxed layout backgrounds
Color schemes

More color schemes will be available soon!

Badges & Labels Badges and labels are inline elements with multiple styles that can be used to create indicators and unread counts.

Basic

The examples below can be used inside other elements like content box headers, accordions, tabs, navigation menu links, etc.

1 2 2 3 4 4 5 6 Label example 1 Label example 2 Label 2 Label 3 Label 4 Label 4 Label 5 Label 6

Font color

You can create solid white badges & labels with different font colors.

35 35 35 35 35 35 35 35 .font-blue .font-red .font-orange .font-green .font-black .font-gray .font-gray-dark .font-white

Opacity

You can take any badge or label element and add an opacity core helper class. Available opacity helpers: opacity-30, opacity-60 and opacity-80.

35 35 35 35 35 35 35 35
.font-blue .font-red .font-orange .font-green .font-black .font-gray .font-gray-dark .font-white

Border radius

You can use the border radius helpers included in the core to change the CSS3 border radius of the elements, in this case, badges and label. The border radius helper classes can be applied to either all borders or only specific borders (eg. top right, bottom left & right, etc)

64 64 64 64 64 64 64 64

Positioned relative

Badges & labels can be stand alone elements as in the examples above or they can be integrated into different elements like (tabs, accordions headers, buttons, etc). These integrations can have one of two values, inline or absolute.

5 Inline Badge Example label

The content box header contains a right aligned inline label and a left aligned badge.

Right badge 11 54 Left badge

Positioned absolute

You can add absolute positioned badges and label to any element (buttons, tabs, accordions, etc). You can control the position using the float-left and float-right classes.