Panels
‹ BackPanels and colour variants
To create a panel, all you need is a panel
class:
<div class="panel panel__passive"> This is a panel </div>
There are a few different out-of-the-box colour variations for panels:
<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.
<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:
<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:
<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.
<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.
<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>