Panel Box
Default Panel Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
Success Panel Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
Primary Panel Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
Danger Panel Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
Warning Panel Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
Info Panel Box
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.
Usage add class .bg-default
to panel-box-title and .text-default
to panel-box footer
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-6">
<div class="panel-box">
<div class="panel-box-title bg-default text-white">
<h5>Default panel-box</h5>
</div>
<div class="panel-box-content p-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.</p>
</div>
<div class="panel-box-footer">
panel-box Footer
</div>
</div>
</div>
Panel Box with toolbar Usage add class .panel-box
inside of .panel-box-title
add div and add class .panel-box-tools
see the example below
<div class="col-xl-4 col-lg-4 col-md-4 col-sm-6">
<div class="panel-box">
<div class="panel-box-title bg-default text-white">
<h5>Default panel-box</h5>
<div class="panel-box-tools">
<a class="collapse-link ui-sortable text-white">
<i class="fa fa-chevron-up"></i>
</a>
<a class="dropdown-toggle text-white" data-toggle="dropdown" href="#">
<i class="fa fa-wrench"></i>
</a>
<ul class="dropdown-menu dropdown-user dropdown-menu-right">
<li><a href="#">Action option 1</a></li>
<li><a href="#">Action option 2</a></li>
</ul>
<a class="close-link text-white">
<i class="fa fa-times"></i>
</a>
</div>
</div>
<div class="panel-box-content p-3">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan.</p>
</div>
<div class="panel-box-footer">
panel-box Footer
</div>
</div>
</div>