{ WRAPKIT }
  1. Home
  2. Panel

Panel While not always necessary

Sometimes you need to put your DOM in a box. For those situations, try the panel component.

Basic panel example

Panel with heading

Easily add a heading container to your panel with .panel-heading. You may also include any h1 - h6 with a .panel-title class to add a pre-styled heading.

Panel heading

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, asperiores, accusamus, explicabo, pariatur at voluptate error voluptas quaerat reiciendis excepturi quasi quae quia provident. Tenetur est impedit sit labore molestiae.

Alternative button

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, asperiores, accusamus, explicabo, pariatur at voluptate error voluptas quaerat reiciendis excepturi quasi quae quia provident. Tenetur est impedit sit labore molestiae.

Default Collapsed Panel custom event

Heads up! This alert needs your attention, but it's not super important.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error, accusantium quod soluta et nostrum rerum dolor incidunt corrupti harum assumenda perspiciatis magnam numquam nulla minus dolorum deleniti earum! Quos culpa odio non pariatur minus voluptatem.

With dropdown
Subtitle type here...

Warning! Better check yourself, you're not looking too good.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut, quasi minima incidunt non deserunt eum, this text hide on expand.

Panel with footer

Wrap buttons or secondary text in .panel-footer. Note that panel footers do not inherit colors and borders when using contextual variations as they are not meant to be in the foreground.

Panel content
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, esse reprehenderit consectetur dolores mollitia.

With form inline

Panel content
Panel footer

Nestable

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ex, laudantium, explicabo, dicta, ullam odit voluptate voluptatem deserunt numquam animi sunt facilis voluptatum obcaecati quis recusandae non praesentium iure ut amet.

Label 7
Panel1

Auto hide nice scroll, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, asperiores, accusamus, explicabo, pariatur at voluptate error voluptas quaerat reiciendis excepturi quasi quae quia provident. Tenetur est impedit sit labore molestiae.

Enim, dicta, eos, numquam rem reiciendis ab necessitatibus vel tenetur voluptas porro praesentium perspiciatis voluptatibus beatae totam ducimus dolorem nulla explicabo? Distinctio.

Panel2

Always show, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, asperiores, accusamus, explicabo, pariatur at voluptate error voluptas quaerat reiciendis excepturi quasi quae quia provident. Tenetur est impedit sit labore molestiae.

Enim, dicta, eos, numquam rem reiciendis ab necessitatibus vel tenetur voluptas porro praesentium perspiciatis voluptatibus beatae totam ducimus dolorem nulla explicabo? Distinctio.

Panel3

No Rail, Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod, asperiores, accusamus, explicabo, pariatur at voluptate error voluptas quaerat reiciendis excepturi quasi quae quia provident. Tenetur est impedit sit labore molestiae.

Enim, dicta, eos, numquam rem reiciendis ab necessitatibus vel tenetur voluptas porro praesentium perspiciatis voluptatibus beatae totam ducimus dolorem nulla explicabo? Distinctio.

Panel footer

Contextual alternatives

Like other components, easily make a panel more meaningful to a particular context by adding any of the contextual state classes.

Panel primary

Panel content

Panel inverse

Panel content

Panel success

Panel content

Panel info

Panel content

Panel warning

Panel content

Panel danger

Panel content

Other Colors

Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

With Tabs

Tab 1, Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Tab 2, Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Tab 3, Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.
Tab 4, Raw denim you probably haven't heard of them jean shorts Austin. Nesciunt tofu stumptown aliqua, retro synth master cleanse. Mustache cliche tempor, williamsburg carles vegan helvetica. Reprehenderit butcher retro keffiyeh dreamcatcher synth. Cosby sweater eu banh mi, qui irure terry richardson ex squid. Aliquip placeat salvia cillum iphone. Seitan aliquip quis cardigan american apparel, butcher voluptate nisi qui.

Panel Minimalize

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, reprehenderit, necessitatibus, at ducimus aut fuga facere eveniet commodi explicabo praesentium nisi ratione eaque provident obcaecati quod nostrum labore. At, nulla harum dolore iste reprehenderit. Optio, cupiditate, at, fugiat, neque debitis excepturi libero laborum sit harum architecto magnam molestias aut obcaecati unde consequuntur reiciendis enim beatae. Eum, est error cupiditate aspernatur deserunt velit in. Ad, nisi, quos, est vel porro ab ipsa minus debitis beatae error distinctio dolor reiciendis consectetur eligendi expedita enim cumque harum dicta! Dolor, iste, dolorum, modi, velit expedita minima voluptatibus ratione nesciunt nulla ad voluptatum amet officiis.

Panel Minimalize alt

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, reprehenderit, necessitatibus, at ducimus aut fuga facere eveniet commodi explicabo praesentium nisi ratione eaque provident obcaecati quod nostrum labore. At, nulla harum dolore iste reprehenderit. Optio, cupiditate, at, fugiat, neque debitis excepturi libero laborum sit harum architecto magnam molestias aut obcaecati unde consequuntur reiciendis enim beatae. Eum, est error cupiditate aspernatur deserunt velit in. Ad, nisi, quos, est vel porro ab ipsa minus debitis beatae error distinctio dolor reiciendis consectetur eligendi expedita enim cumque harum dicta! Dolor, iste, dolorum, modi, velit expedita minima voluptatibus ratione nesciunt nulla ad voluptatum amet officiis.

With tables

Add any non-bordered .table within a panel for a seamless design. If there is a .panel-body, we add an extra border to the top of the table for separation.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter

Panel heading

# First Name Last Name Username
1 Mark Otto @mdo
2 Jacob Thornton @fat
3 Larry the Bird @twitter
If there is no panel body, the component moves from panel header to table without interruption.

With list groups

Easily include full-width list groups within any panel.

Panel heading

Some default panel content here. Nulla vitae elit libero, a pharetra augue. Aenean lacinia bibendum nulla sed consectetur. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Nullam id dolor id nibh ultricies vehicula ut id elit.

  • Cras justo odio
  • Dapibus ac facilisis in
  • Morbi leo risus
  • Porta ac consectetur ac
  • Vestibulum at eros

Javascript

Call panels .panel with a single line of JavaScript:

$( ".panel" ).wrapkitPanel( options );

More about wrapkitPanel plugin can be learned on wrapkit documentation (on download files).