.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
.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.
.panel-collapsed
to .panel
and .collapse
to .panel-container
Default panel text.
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
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
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
.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
.panel-toolbar
, .panel-content
and .panel-hdr
. Check out the badge page to learn more about badges
.panel-hdr
and any other parts of the .panel
.panel-hdr
with moderation. Adding too many elements may break the design on mobile viewport
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
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-hdr
and footer area. You can also customize the colors to make it stand out