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 your users 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 panelclose 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