Language selection

Search

Panels

Work in progress

This page is a work in progress.

Please file an issue or submit a pull request if information or coding is missing, incorrect or out of sync with the main repository (wet-boew/wet-boew).

Purpose

Use to create a visual grouping of content. Panels have colour themed options, as well as offer a distinct header and footer.

Design and coding

Basic use

Stacking options

Use to create various container types. A panel can be broken up into a .panel, .panel-heading, .panel-title, panel-body and .panel-footer. Only the .panel is required. All the rest are optional.

Appearance
Padded content:

Content

Full-width content:
Caption text
Table header Table header
Table data Table data
Table data Table data
Padded plus full-width content:

Content

Caption text
Table header Table header
Table data Table data
Table data Table data
Add a heading and/or footer:
Panel title

Content

Panel footer
Correct use

Compliance point(s):

  • Use to call attention to a specific segment of noteworthy content
    • Required CSS: .panel
    • Optional CSS: .panel-heading, .panel-title, .panel-body and .panel-footer
  • Ensure a heading <h*> is used within the .panel-heading
  • Use .panel for both full-width content, as well as content that is padded in from the border with .panel-body
  • Include a <caption> when the <table> is not directly under an <h*> tag
  • Use .wb-inv when it is necessary to make the caption invisible
    • This ensures accessibility
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s).
Code
//Padded content:
<div class="panel panel-default">
  <div class="panel-body">
   <p>...</p>
  </div>
</div>

//Full-width content, invisible caption:
<div class="panel panel-default">
  <table class="table">
  <caption class="wb-inv">Caption text</caption>
   ...
  </table>
</div>

//Padded plus full-width content:
<div class="panel panel-default">
  <div class="panel-body">
   <p>...</p>
  </div>
  <table class="table">
   ...
  </table>
</div>

//Add a heading and/or footer:
<div class="panel panel-default">
  <header class="panel-heading">
   <h5 class="panel-title">...</h5>
  </header>
  <div class="panel-body">
   <p>...</p>
  </div>
  <footer class="panel-footer">...</footer>
</div>

Default panel

Use to spotlight general information/actions within a self-contained box.

Appearance
Panel title

Panel content

Correct use

Compliance point(s):

  • Use .panel-heading, .panel-title and .panel-body to spotlight general information/actions within a self-contained box
  • Ensure all compliance points are adhered to in stacking options
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s).
Code
<section class="panel panel-default">
  <header class="panel-heading">
   <h5 class="panel-title">...</h5>
  </header>
  <div class="panel-body">
   <p>...</p>
  </div>
</section>

Primary panel

Use to spotlight general information/actions within a self-contained box.

Appearance
Panel title

Panel content

Correct use

Compliance point(s):

  • Use .panel-primary to spotlight general information/actions within a self-contained box
  • Ensure all compliance points are adhered to in stacking options
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s).
Code
<section class="panel panel-primary">
  <header class="panel-heading">
   <h5 class="panel-title">...</h5>
  </header>
  <div class="panel-body">
   <p>...</p>
  </div>
</section>

Success panel

Use to spotlight correct information/actions within a self-contained box.

Appearance
Panel title

Panel content

Correct use

Compliance point(s):

  • Use .panel-success to spotlight correct information/actions within a self-contained box
  • Ensure all compliance points are adhered to in stacking options
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s).
Code
<section class="panel panel-success">
  <header class="panel-heading">
   <h5 class="panel-title">...</h5>
  </header>
  <div class="panel-body">
   <p>...</p>
  </div>
</section>

Info panel

Use to spotlight specialized information/actions within a self-contained box..

Appearance
Panel title

Panel content

Correct use

Compliance point(s):

  • Use .panel-info to spotlight specialized information/actions within a self-contained box
  • Ensure all compliance points are adhered to in stacking options
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s).
Code
<section class="panel panel-info">
  <header class="panel-heading">
   <h5 class="panel-title">...</h5>
  </header>
  <div class="panel-body">
   <p>...</p>
  </div>
</section>

Warning panel

Use to spotlight warning information/actions within a self-contained box.

Appearance
Panel title

Panel content

Correct use

Compliance point(s):

  • Use .panel-warning to spotlight warning information/actions within a self-contained box
  • Ensure all compliance points are adhered to in stacking options
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s).
Code
<section class="panel panel-warning">
  <header class="panel-heading">
   <h5 class="panel-title">...</h5>
  </header>
  <div class="panel-body">
   <p>...</p>
  </div>
</section>

Danger panel

Use to spotlight dangerous information/actions within a self-contained box.

Appearance
Panel title

Panel content

Correct use

Compliance point(s):

  • Use .panel-danger to spotlight dangerous information/actions within a self-contained box
  • Ensure all compliance points are adhered to in stacking options
Incorrect use

Compliance point(s):

  • Do not use this component in a way that conflicts with the preceding compliance point(s).
Code
<section class="panel panel-danger">
  <header class="panel-heading">
   <h5 class="panel-title">...</h5>
  </header>
  <div class="panel-body">
   <p>...</p>
  </div>
</section>

Enhanced use

Add-on features

Additional add-on features and behaviours are available.

Some of the code and documentation for this page is sourced from Bootstrap (external link)

Date modified: