What the heck happened to the rest of the UIF documentation?

All the CSS-only components have been moved across to the Storybook version of our UIF docs.

The jQuery dependent components are considered legacy, and while still currently available, are not going to be actively developed upon any longer. Also, it's a schlep trying to get jQuery to work within webpack/storybook, so they can stay here.

Please consider using CSS-only components for maximum ongoing happiness. 💖

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

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