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.

Default Panel

All panels needs to have an unique ID in order to use the panel funtions.
.panel, id="panel-ID"
.panel-hdr
h2 Panel header goes here
.panel-toolbar Optional toolbar
.panel-container
.panel-content 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

Panel Style
Actions
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.
Panel Style
Actions

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

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

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.

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

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.
Random Colorful Bar Graph