Version 3.0.6

Panels

A panel is a flexible and extensible content container. It includes options for headers and footers, a wide variety of content, and powerful display options.

A default panel uses borders, padding, drop-shadows, and a white background to seperate select content from the rest of the page content.

You have also have the option to choose reduced padding for your panel by adding .panel-sm, .panel-md, .panel-lg classes.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

                      
<article class="panel panel-default">
<section class="panel-content">
<p class="wide"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
</article>
<article class="panel panel-sm panel-default">
<section class="panel-content">
<p class="wide"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
</section>
</article>

Panels typically include a title and action buttons. Panel titles should be short and quickly describe the content contained within.

Title

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.

                      
<article class="panel panel-default">
<header class="panel-header">
<h2 class="panel-title">Title</h2>
</header>
<section class="panel-content">
<p class="wide"> Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</section>
<footer class="panel-footer">
<div class="panel-buttons">
<button class="btn btn-gray">Cancel</button>
<button class="btn btn-blue">Action</button>
</div>
</footer>
</article>

Tabbed panels are used to display content that is both related to and independent from one another. These tabs can either be read-only as or customizable.

Folder-tabbed panels are most often used with panels that sit on their own on a page. For example the login page contains a folder-tabbed panel with two tabs: one for logging into the application and one for signing up for the application.

Suspendisse pretium sem non mauris auctor, porttitor euismod velit mattis. Ut hendrerit efficitur maximus.

                           
<article class="panel panel-default">
<header class="panel-tabs">
<div class="tab active">
<a href="">
<h6>Tab</h6>
</a>
</div>
<div class="tab">
<a href="">
<h6>Tab</h6>
</a>
</div>
</header>
<section class="panel-content">
<p class="wide">Suspendisse pretium sem non mauris auctor, porttitor euismod velit mattis. Ut hendrerit efficitur maximus.</p>
</section>
</article>

Folder-tabbed functional panels are panels with customizable tabs. An example of this type of panel can be found in the Advocacy Targeting workflow in Online Actions. In that example, the people using Advocacy Targeting can add and label new tabs for each message they wish to send to their selected targets.

Suspendisse pretium sem non mauris auctor, porttitor euismod velit mattis. Ut hendrerit efficitur maximus.

                      
<article class="panel panel-default">
<header class="panel-tabs functional">
<div class="tab">
<a href="">
<h6>Tab 1</h6>
</a>
<div class="tab-title">
<input type="text" value="Tab 1" class="input-element">
</div>
</div>
<div class="tab active">
<a href="">
<h6>Tab 2</h6>
</a>
<div class="tab-title">
<input type="text" value="Tab 2" class="input-element">
</div>
</div>
<div class="tab active editing">
<a href="">
<h6>Tab 3</h6>
</a><div class="tab-title">
<input type="text" value="Tab 3" class="input-element">
</div>
</div>
<div class="tab add">
<a href="">
<span class="glyphicons glyphicons-plus"></span>
</a>
</div>
</header>
<section class="panel-content">
<p class="wide">Suspendisse pretium sem non mauris auctor, porttitor euismod velit mattis. Ut hendrerit efficitur maximus.</p>
</section>
</article>

Inline-tabbed panels are used to organize data within a panel on denser pages consisting of multiple panels. Inline-tabbed panels also include a title that is always visible regardless of which tab is selected.

Tabbed Panel

Suspendisse pretium sem non mauris auctor, porttitor euismod velit mattis. Ut hendrerit efficitur maximus.

                      
<article class="panel panel-default">
<header class="panel-header">
<h6 class="panel-title">Tabbed Panel</h6>
<nav class="panel-nav">
<ul class="tabs">
<li class="active">
<a href="">Tab 1</a>
</li>
<li>
<a href="">Tab 2</a>
</li>
</ul>
</nav>
</header>
<section class="panel-content">
<p class="wide">Suspendisse pretium sem non mauris auctor, porttitor euismod velit mattis. Ut hendrerit efficitur maximus.</p>
</section>
</article>

Search Results

Powered by