Panels

Warning: You are currently browsing without javascript enabled.

‹ Back

Panels and colour variants

To create a panel, all you need is a panel class:

This is a panel

<div class="panel panel__passive">
  This is a panel
</div>

There are a few different out-of-the-box colour variations for panels:

Primary colour panel Link

Alert panel Link

Error panel Link

Notice panel Link

Success panel Link

Passive Panel Link

<div class="panel-spacing">
  <div class="panel__primary">
    Primary colour panel <a href="#">Link</a>
  </div>
  <div class="panel__alert">
    Alert panel <a href="#">Link</a>
  </div>
  <div class="panel__error">
    Error panel <a href="#">Link</a>
  </div>
  <div class="panel__notice">
    Notice panel <a href="#">Link</a>
  </div>
  <div class="panel__success">
    Success panel <a href="#">Link</a>
  </div>
  <div class="panel__passive">
    Passive Panel <a href="#">Link</a>
  </div>
</div>

You can create custom panel classes by adding colour variations to the panel.css.scss file.

Panel padding

You can add .panel--padding to add padding to the panel.

Panel with padding

<div class="panel__passive panel--padding">
  Panel with padding
</div>

Stacking panels

You can stack panels by adding in the panel__no-bottom-radius and panel__no-top-radius classes:

Blue panel with no bottom radius

Panel with no top radius

<div class="panel">
  <div class="panel__primary panel--padding panel__no-bottom-radius">
    Blue panel with no bottom radius
  </div>
  <div class="panel__passive panel--padding panel__no-top-radius">
    Panel with no top radius
  </div>
</div>

This is the reason why panels don't have padding by default, so that panels can stack and have independant padding.

Spacing panels

You can space out panels by using the panel-spacing wrapper class:

Panel 1

Panel 2

<div class="panel-spacing">
  <div class="panel__passive panel--padding">
    Panel 1
  </div>
  <div class="panel__passive panel--padding">
    Panel 2
  </div>
</div>

By default it will space out all panel elements, but you can also add a panel-spacer class to space out non-panels as if they were a panel. In the example below, "Panel 2" isn't actually a panel, but it acts like one when sitting next to other panels.

Panel 1

Panel 2

Panel 3

<div class="panel-spacing">
  <div class="panel__passive panel--padding">
    Panel 1
  </div>
  <div class="panel-spacer">
    Panel 2
  </div>
  <div class="panel__passive panel--padding">
    Panel 3
  </div>
</div>

Panel bordering

You can add a border around the entire panel with the .panel__border class.

You can add top borders to panel sections using the .panel--border-top class.

Panel border styles can be customised in settings.scss with the $panel-border variable.

Panel

<div class="panel-spacing">
  <div class="panel__passive panel--padding panel__border">
    Panel
  </div>
  <div class="panel__success panel--padding panel__border">
    Panel
  </div>
  <div class="panel__error panel__border">
    <div class="panel--padding">
      Panel
    </div>
    <div class="panel--padding panel--border-top">
      Panel
    </div>
  </div>
</div>