Skip to content
Skip to content

Panel

Create layout boxes with different styles

Usage

+3

Panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius eligendi, esse.

<div class="c-panel">
  <span class="c-badge c-badge--danger c-panel__badge">+3</span>
  <h3 class="c-panel__title">c-panel title</h3>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius eligendi, esse.</p>
</div>

Panel box (.c-panel--box)

+3

This is the panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit.

Up

This is the second panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius eligendi, esse.

+3

Third panel title

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti eius eligendi, esse consectetur adipisicing elit.

<div class="c-panel c-panel--box">...</div>

Stacked panels (.c-panel--stacked)

It is possible to make a panel box look as though it is stack on top of others. Useful for tabs and such like.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error illum magnam minima placeat rem! Ab at beatae culpa deleniti excepturi, exercitationem illo laboriosam nostrum officia perspiciatis recusandae sequi tempora voluptates.

<div class="c-panel c-panel--box c-panel--stacked">
  ....
</div>

Piled panels (.c-panel--piled)

It is possible to make a panel box look as though it is on top of a pile of others.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error illum magnam minima placeat rem! Ab at beatae culpa deleniti excepturi, exercitationem illo laboriosam nostrum officia perspiciatis recusandae sequi tempora voluptates.

<div class="c-panel c-panel--box c-panel--piled">
  ....
</div>

Attached panel (.c-panel--attached)

It is possible to attached the panel to other attachable items, for example, the menu (in tabular format) component, to create a tab like component.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error illum magnam minima placeat rem! Ab at beatae culpa deleniti excepturi, exercitationem illo laboriosam nostrum officia perspiciatis recusandae sequi tempora voluptates.

<ul class="c-menu c-menu--tabular c-menu--attached">
  <li class="c-menu__item is-active"><a href="#" class="c-menu__link">One</a></li>
  ....
</ul>
<div class="c-panel c-panel--box c-panel--attached">
  ....
</div>

Panel groups (.Panels)

If you wrap you panels with a parent element with the class Panels, the margin is removed from the individual panel components, creating a connected look.

Top panel

Middle panel

Bottom panel

<div class="Panels">
  <div class="c-panel c-panel--box">
    <p>Top panel</p>
  </div>
  <div class="c-panel c-panel--box">
    <p>Middle panel</p>
  </div>
  <div class="c-panel c-panel--box">
    <p>Bottom panel</p>
  </div>
</div>

Horizontal Panels (.Panels--horizontal)

Top panel
With more content

Middle panel

Bottom panel

<div class="Panels Panels--horizontal">
  <div class="c-panel c-panel--box">
    <p>Top panel
With more content</p>
  </div>
  <div class="c-panel c-panel--box">
    <p>Middle panel</p>
  </div>
  <div class="c-panel c-panel--box">
    <p>Bottom panel</p>
  </div>
</div>

Hidden Panels (.Panels--hidden)

The hides all of the children panels unless given a is-active class. This can be used with the switcher module to create simple tabs.

Panel 1

Panel 2

Panel 3

<ul class="c-menu" data-module="Switcher">
  <li class="c-menu__item"><a href="#" class="c-menu__link">c-panel 1</a></li>
  <li class="c-menu__item"><a href="#" class="c-menu__link">c-panel 2</a></li>
  <li class="c-menu__item"><a href="#" class="c-menu__link">c-panel 3</a></li>
</ul>

<div class="Panels Panels--hidden">
  <div class="c-panel c-panel--box">
    <p>c-panel 1</p>
  </div>
  <div class="c-panel c-panel--box">
    <p>c-panel 2</p>
  </div>
  <div class="c-panel c-panel--box">
    <p>c-panel 3</p>
  </div>
</div>

Colour Modifiers

Primary panel

Lorem ipsum dolor sit amet.

Secondary panel

Lorem ipsum dolor sit amet.

Success panel

Lorem ipsum dolor sit amet.

Warning panel

Lorem ipsum dolor sit amet, consectetur.

Error panel

Lorem ipsum dolor sit amet.

Primary panel

Lorem ipsum dolor sit amet.

Secondary panel

Lorem ipsum dolor sit amet.

Success panel

Lorem ipsum dolor sit amet.

Warning panel

Lorem ipsum dolor sit amet, consectetur.

Error panel

Lorem ipsum dolor sit amet.

<div class="c-panel c-panel--primary">...</div>
<div class="c-panel c-panel--secondary">...</div>
<div class="c-panel c-panel--success">...</div>
<div class="c-panel c-panel--warning">...</div>
<div class="c-panel c-panel--error">...</div>

<div class="c-panel c-panel--box c-panel--primary">...</div>
<div class="c-panel c-panel--box c-panel--secondary">...</div>
<div class="c-panel c-panel--box c-panel--success">...</div>
<div class="c-panel c-panel--box c-panel--warning">...</div>
<div class="c-panel c-panel--box c-panel--error">...</div>

Panel teaser image (.c-panel__teaser)

Amet at, debitis delectus dolore eligendi

Amet at, debitis delectus dolore eligendi

Class Description Type
.c-panel This defines a c-panel component Component
.c-panel__title This creates the panel title Sub-element
.c-panel__badge This positions the panel in the top right Sub-element
.c-panel__teaser Image associated with the panel Sub-element
.c-panel--box This creates some box styling Modifier
.c-panel--primary This creates some styling with primary colour Modifier
.c-panel--primary This creates some styling with primary colour Modifier
.c-panel--success This creates some styling with success colour Modifier
.c-panel--warning This creates some styling with warning colour Modifier
.c-panel--error This creates some styling with error colour Modifier
.c-panel--attached Changes the styles so a panel can be seamlessly attached to another attachable component Modifier