Panel
ready

Introduction

Panels create visual blocks on the page, which create more obvious groupings of related content or controls. They visually up the affordance of related elements.

Examples

Default panel

Panel head

Panel content

Panel foot

<div class="panel">
         <div class="panel__head">
           <h3>Panel head</h3>
         </div>
         <div class="panel__content">
           <p>Panel content</p>
         </div>
         <div class="panel__foot">
           <p>Panel foot</p>
         </div>
     </div>

Grey panel

Panel head

Panel content

Panel foot

<div class="panel panel--grey">
         <div class="panel__head">
           <h3>Panel head</h3>
         </div>
         <div class="panel__content">
           <p>Panel content</p>
         </div>
         <div class="panel__foot">
           <p>Panel foot</p>
         </div>
     </div>

Blue panel

Panel head

Panel content

Panel foot

<div class="panel panel--blue">
         <div class="panel__head panel__head--blue">
           <h3>Panel head</h3>
         </div>
         <div class="panel__content panel__content--blue">
           <p>Panel content</p>
         </div>
         <div class="panel__foot panel__foot--blue">
           <p>Panel foot</p>
         </div>
     </div>

Bright blue panel

Panel head

Panel content

Panel foot

<div class="panel panel--bright-blue">
         <div class="panel__head panel__head--bright-blue">
           <h3>Panel head</h3>
         </div>
         <div class="panel__content panel__content--bright-blue">
           <p>Panel content</p>
         </div>
         <div class="panel__foot panel__foot--bright-blue">
           <p>Panel foot</p>
         </div>
     </div>

Record entry panel

close

Employment entry

Panel content

<div class="panel">
         <div class="panel__head panel__head--grey panel__head--short">
             <a href="#" class="link--silent icon icon--16x16 icon--box icon--x-grey panel__action">close</a>
           <h4 class="text-caps panel__heading">Employment entry</h4>
         </div>
         <div class="panel__content">
           <p>Panel content</p>
         </div>
     </div>

Panel accordion

toggle

Panel head

Panel content

<div class="accordion" data-js="accordion" data-accordion-start="all-closed">
     
       <div class="panel" data-js="accordion-segment">
           <div class="panel__head panel__head--grey panel__head--short" data-js="accordion-toggle">
               <a href="#" class="link--silent icon icon--16x16 icon--up-grey panel__action">toggle</a>
             <h4 class="heading--mono panel__heading">Panel head</h4>
           </div>
           <div class="panel__content" data-js="accordion-content">
             <p>Panel content</p>
           </div>
       </div>
     </div>

Dependencies

  • src/styles/base/*.scss
  • src/styles/components/blocks/_panel.scss
  • src/scripts/modules/jquery.pfAccordion.js

Usage

Class/JavaScript Hook Description Required?
.panel Placed on outer-most tag that will contain the panel Required
.panel__head Used for a panel header Optional
.panel__action Added to an icon-styled tag, which should be the first child of .panel__head, when wanting to display an action icon on the top right of the panel. Customise with necessary icon classes as needed. Optional
.panel__content Used for a panel content Required
.panel__foot Used for a panel footer Optional
.panel--centered Center aligns panel text and images Optional
.panel__[head|content|foot]--grey Gives the panel or panel section grey styling Optional
.panel__[head|content|foot]--blue Gives the panel or panel section blue styling Optional
.panel__[head|content|foot]--bright-blue Gives the panel or panel section a more intense blue styling Optional
.panel__[head|content|foot]--fat Adds more padding to the relevant panel elements Optional
.panel__[head|content|foot]--short Reduces vertical padding of the relevant panel elements Optional
.panel__[head|content|foot]--tall Adds extra vertical padding of the relevant panel elements Optional