Panels Panels can be used in almost any situation, helping wrap everything in a slick & lightweight container
The
.panelcontainers 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-cleanto bodyGive 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 SmartPanelsplugin.
Default Panel
.panelis a container with no padding, .panel-hdrhas a min-heightvalue and default flexboxproperties. The .panel-toolbaris inserted into .panel-hdrfor extra elements. The .panel-containerwraps .panel-contentwhich has a predefined padding.
Default panel text.
Collapsed Panel
.panel-collapsedto .paneland .collapseto .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-contentas 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-contentas 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-contentas button or link
Panel Colors
Panel master button
.btn-toolbar-masterbutton 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-contentand .panel-hdr. Check out the badge pageto learn more about badges
Form elements
.panel-hdrand any other parts of the .panel
Form inputs
.panel-hdrwith moderation. Adding too many elements may break the design on mobile viewport
Panel buttons
Panel tabs
You can easily add .nav-tabsto .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-pillsto .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-hdrand footer area. You can also customize the colors to make it stand out