# Panels

###### Panels can be used in almost any situation, helping wrap everything in a slick & lightweight container.

Display data, tables, forms, or images effortlessly with our lightweight, clean, and highly customizable panels. Expand to fullscreen, collapse, or close as needed. Equiped with many interactive features, a versatile design, these panels adapt to your workflow seamlessly. Auto-save keeps your layout intact, while SortableJS lets you drag and organize panels seamlessly. Need to print? Just switch to fullscreen for a perfect view. All panels can be reset to their default state by clicking the button below.

## Blank Panel

All panels needs to have an unique ID in order to use the panel sorting funtions.

Panel content goes here...

## Collapsed Panel

This panel is closed by default. To close a panel we add the class `.panel-collapsed` to `.panel`

Default panel text.

## Collapsable Panel

Panel is closed by using the attribute `data-action="panel-collapse"`, and can be placed anywhere inside `.panel`

You can also place the collapse action inside the `.panel-content` as button or link

collapse link

## Fullscreen Panel

Panel is closed by using the attribute `data-action="panel-fullscreen"`, and can be placed anywhere inside `.panel`

You can also place the collapse action inside the `.panel-content` as button or link

fullscreen link

## Close Panel

Panel is closed by using the attribute `data-action="panel-close"`, and can be placed anywhere inside `.panel`

You can also place the collapse action inside the `.panel-content` as button or link

close link

## Panel Colors

You can mix and match any color styles, below is what we were found to be an interesting match.

## Master Button

The `.btn-toolbar-master` class enhances `.panel-toolbar` by integrating dropdown functionality and additional actions while optimizing space. It supports icons, grouped actions, submenus, and input fields, making panels more interactive and organized.

## Label Panel sup

Panel Badge
You may place badge inside `.panel-toolbar`, `.panel-content` and `.panel-hdr`. Check out the badges page to learn more about badges
Footer badge Pill badge 1 22

## Form elements

Panel switch
You can add form elements to `.panel-hdr` and any other parts of the `.panel`
Panel checkbox

## Form Inputs

You can add form inputs to `.panel-hdr` with moderation. Adding too many elements may break the design on mobile viewport

## Panel Buttons

Add panel buttons to `.panel-hdr` and footer area. Keep in mind of your panel title size as distortion can occur with too many buttons overflowing.

- Prev
- 1
- 2
- 3
- Next

## Panel Tabs

You can easily add `.nav-tabs` to `.panel-hdr`, consider adding dropdown panel button if you have a lot of panel tabs. Check out the Tabs & pills page for more details

Default Clean

## Panel Locked

This panel is locked from drag and drop. We use the class `.panel-locked` to lock the panel. Go ahead and try to drag it, it won't budge!
Reset panel will also unlock the panel.

##
Insert Icon

75%
Insert sleek icons—with over 2,500 options to choose from—and dynamic progress bars to bring your panel to life, making data clearer, faster, and more engaging than ever! You can also add stylish progress bars to enhance your design.

## Classic Icons

Looking for a less cluttered panel? Add `.panel-icon` class to your `.panel` to remove panel buttons and keep only the icons.

## Panel Refresh

Refresh panels with a simple button. Use the `data-action="panel-refresh"` to activate the refresh feature. The `data-refresh-duration` attribute sets the refresh interval and the `data-refresh-callback="functionName"` attribute sets the callback function.

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode