Panels

Panels

Panels - A flexible and extensible content container with multiple variants and options.

Simple Panel

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Panel With Header And Footer

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Panel - Light

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Panel With Icon - Fontawesome

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Panel With Icon - SVG

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Panel Toolbar

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Panel Toolbar Default Action

For a button to be able to minimize and maximize the panel, you should add the class btn-panel-minimize to it.

As for the minimize and maximize icons, you should add the class icon-opened to the icon you want to be shown in the maximized state, and the class icon-collapsed to the icon to be shown in the minimized state.

<button type="button" class="btn btn-light btn-panel-minimize">
     <i class="fas fa-chevron-down icon-opened"></i>
     <i class="fas fa-chevron-up icon-collapsed"></i>
</button>

<button type="button" class="btn btn-light panel-fade btn-panel-close">
     <i class="fas fa-times"></i>
</button>

For a button to be able to close/detach the panel, you should add the class btn-panel-close to it.

Alternatively, you can add the class btn-fade to the closer button, if you want a fade animation while closing.

Minimizing Without Footer

If you want to add the footer to the hidden area while in the minimized mode, just wrap both the .panel-footer and the .panel-body, in an element with the class .panel-minimizable.

Note that for the functions to work properly, the element with the class panel-minimizable should be a direct child of the .panel element.
Note that in every situation except Exon above, both the .panel-body and .panel-footer element should be a direct child of the .panel element.

Panels With Full Height Buttons

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Tab 1 Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Tab 2 Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Tab 3 Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Tab 1 Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Tab 2 Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Tab 3 Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Tab 1 Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Tab 2 Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Tab 3 Content

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Panel Color Variations - Primary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Panel Color Variations - Secondary

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Panel Color Variations - Success

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Panel Color Variations - Danger

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Panel Color Variations - Warning

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Panel Color Variations - Info

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Panel Color Variations - Light

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!

Panel Color Variations - Dark

Lorem ipsum dolor sit amet consectetur adipisicing elit. Odio provident modi nihil molestiae, dolorum iusto iste in quas ratione, iure quisquam maiores consectetur? Rem nihil vero nisi voluptatibus hic corrupti!