<div class="row wrapper border-bottom white-bg page-heading">
<div class="col-lg-10">
<h2>Tabs & Panels</h2>
<ol class="breadcrumb">
<li>
<a href="index.html">Home</a>
</li>
<li>
<a>UI Elements</a>
</li>
<li class="active">
<strong>Tabs & Panels</strong>
</li>
</ol>
</div>
<div class="col-lg-2">
</div>
</div>
<div class="wrapper wrapper-content animated fadeIn">
<div class="row">
<div class="col-lg-12">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Basic IN+ Panel <small class="m-l-sm">This is custom panel</small></h5>
<div ibox-tools></div>
</div>
<div class="ibox-content">
<h2 >
This is standard IN+ Panel<br/>
</h2>
<p>
<strong>Lorem ipsum dolor</strong>
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
<p>
<small>
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
</small>
</p>
</div>
<div class="ibox-footer">
<span class="pull-right">
The righ side of the footer
</span>
This is simple footer example
</div>
</div>
</div>
<div class="col-lg-12">
<div class="ibox collapsed">
<div class="ibox-title">
<h5>Example of <small>initial</small> collapsed panel</h5>
<div ibox-tools></div>
</div>
<div class="ibox-content">
<p>
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
<p>
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
</p>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="ibox">
<div class="ibox-title">
<h5>Example with fullscreen option</h5>
<div ibox-tools-full-screen></div>
</div>
<div class="ibox-content">
<p>
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. </p>
<p>
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
</p>
</div>
</div>
</div>
<div class="col-lg-12">
<div class="ibox">
<div class="ibox-title">
<h5>Example of constant height with scroll</h5>
<div ibox-tools></div>
</div>
<div class="ibox-content">
<div slim-scroll box-height="160px">
<p>
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</p>
<p>
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis
dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec,
pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.
</p>
<p>
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
</p>
<p>
Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo,
rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis
pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi.
</p>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="ibox">
<div class="ibox-title">
<h5>Bootstrap Panels <small>Custom background colors.</small></h5>
</div>
<div class="ibox-content">
<div class="row">
<div class="col-lg-4">
<div class="panel panel-default">
<div class="panel-heading">
Default Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-primary">
<div class="panel-heading">
Primary Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-success">
<div class="panel-heading">
Success Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-4">
<div class="panel panel-info">
<div class="panel-heading">
<i class="fa fa-info-circle"></i> Info Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-warning">
<div class="panel-heading">
<i class="fa fa-warning"></i> Warning Panel
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
</div>
</div>
<div class="col-lg-4">
<div class="panel panel-danger">
<div class="panel-heading">
Danger Panel with Footer
</div>
<div class="panel-body">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue.</p>
</div>
<div class="panel-footer">
Panel Footer
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<div class="ibox float-e-margins">
<div class="ibox-title">
<h5>Collaps panels</h5>
<div ibox-tools></div>
</div>
<div class="ibox-content">
<uib-accordion close-others="true">
<uib-accordion-group heading="Static Header, initially expanded" is-open="true">
This content is straight in the template.
</uib-accordion-group>
<uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups">
{{group.content}}
</uib-accordion-group>
<uib-accordion-group heading="Dynamic Body Content">
<p>The body of the uib-accordion group grows to fit the contents</p>
</uib-accordion-group>
<uib-accordion-group is-open="status.open">
<uib-accordion-heading>
I can have markup, too! <i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-down': status.open, 'glyphicon-chevron-right': !status.open}"></i>
</uib-accordion-heading>
This is just some content to illustrate fancy headings.
</uib-accordion-group>
</uib-accordion>
</div>
</div>
</div>
<div class="col-lg-6">
<div class="jumbotron">
<h1>Jumbotron</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tincidunt est vitae ultrices accumsan. Aliquam ornare lacus adipiscing, posuere lectus et, fringilla augue. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
<p><a role="button" class="btn btn-primary btn-lg">Learn more</a>
</p>
</div>
</div>
</div>
</div>
Christopher W. Olsen