Panel

Create layout boxes with different styles.

We uses panels to outline certain sections of your content, which can be styled differently. Typically, panels are arranged in grid columns from the Grid component.


Usage

The Panel component consists of the panel itself, the panel title and a panel badge. To prevent redundant white space, top and bottom margins are removed from the panel's content.

Class Description
.panel Add this class to a <div> element to define the Panel component.
.panel-title Add this class to a heading to create the panel title.
.panel-badge Add this class to a <div> element to create a panel badge. The easiest way to style your badge, is by adding the modifier classes from theBadge component.

Example

Hot

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

NOTEBy default, a panel is blank and has no styling. That is why it is important to add a modifier class, which gives the panel some styling. In our examples we used the .panel-box class.


Panels in a grid

This is a short example of how to use panels with the Grid component. Both panels are using the .width-medium-1-2 class.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor.

Modifiers

Modifier classes are necessary to add a specific style to panels. UIkit includes a number of panel modifiers and you also have the possibility to create your own.

Panel box

Add the .panel-box class to create a visually styled box. This is the default panel modifier.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-box

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-box

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-box

Add the .panel-box-primary class to modify the box panel and emphasize it with a different color.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-box-primary

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-box-primary

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-box-primary

Add the .panel-box-secondary class to modify the box panel and give it a white background.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-box-secondary

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-box-secondary

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-box-secondary

Panel header

Add the .panel-header class to seperate the panel title and content with a horizontal line.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-header

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-header

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-header

Panel space

Add the .panel-space class to increase the spacing around the panel content.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-space

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-space

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-space

Panel divider

Add the .panel-divider class to separate vertically stacked panels with lines.

Example

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-divider

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-divider

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit..panel-divider

NOTE Use the .grid-divider class from the Grid component to seperate grid columns.


Panel with icons

Easily apply an icon from our Icon component to your panel by adding one of the .icon-* classes to an or<span> element inside the panel title.

Example

Panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

Panel

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.