Panels Panels can be used in almost any situation, helping wrap everything in a slick & lightweight container
The
.panel
containers are a perfect vessle to display your data, tables, forms or pictures. They are extreamly lightweight and clean. They can be expanded to fullscreen, collapsed or closed. They come with varity of options to display your data uniquely and draw focus where it is needed. Print the panel you need by making it fullscreen. You can also uniform the panels by adding the modifier .mod-panel-clean
to body
Give user access to create panel settings using localstorage. You can change colors, remember collapse state, lock location, and add drag functions to panels. Be sure to check out the our exclusive SmartPanels plugin.
Default Panel
.panel
is a container with no padding, .panel-hdr
has a min-height
value and default flexbox
properties. The .panel-toolbar
is inserted into .panel-hdr
for extra elements. The .panel-container
wraps .panel-content
which has a predefined padding.
Default panel text.
Collapsed Panel
.panel-collapsed
to .panel
and .collapse
to .panel-container
Default panel text.
Collapsable Panel
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
Fullscreen Panel
data-action="panel-fullscreen"
, and can be placed anywhere inside .panel
You can also place the fullscreen action inside the .panel-content
as button or link
Close Panel
data-action="panel-close"
, and can be placed anywhere inside .panel
You can also place the fullscreen action inside the .panel-content
as button or link
Panel Colors
Panel master button
.btn-toolbar-master
button class is added to a dropdown button inside .panel-toolbar
. It is a nice way to add dropdown functions and buttons to your .panel
Label Panel sup
.panel-toolbar
, .panel-content
and .panel-hdr
. Check out the badge page to learn more about badges
Form elements
.panel-hdr
and any other parts of the .panel
Form inputs
.panel-hdr
with moderation. Adding too many elements may break the design on mobile viewport
Panel buttons
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 Pill
You can easily add .nav-pills
to .panel-hdr
, consider adding dropdown button if you have a lot of nav-pills. Check out the Tabs & pills page for more details
Panel progress bars
.panel-hdr
and footer area. You can also customize the colors to make it stand out