Digital Style Guide
Welcome to the digital style guide for your brand.
Panels #
Panel
Default panel
This is a default panel.
<div class="panel">
<div class="inner">
<h2>Default panel</h2>
<p>This is a default panel.</p>
</div>
</div>
Red panel
Red panel
This is a red panel.
<div class="panel bg--red">
<div class="inner">
<h2>Red panel</h2>
<p>This is a red panel.</p>
</div>
</div>
Grey panel
Grey panel
This is a grey panel.
<div class="panel bg--grey">
<div class="inner">
<h2>Grey panel</h2>
<p>This is a grey panel.</p>
</div>
</div>
Light grey panel
Light grey panel
This is a light grey panel.
<div class="panel bg--grey-l">
<div class="inner">
<h2>Light grey panel</h2>
<p>This is a light grey panel.</p>
</div>
</div>
Mid light panel
Mid light grey panel
This is a mid light grey panel.
<div class="panel bg--grey-ml">
<div class="inner">
<h2>Mid light grey panel</h2>
<p>This is a mid light grey panel.</p>
</div>
</div>
Mid dark grey panel
Mid dark grey panel
This is a mid dark grey panel.
<div class="panel bg--grey-md">
<div class="inner">
<h2>Mid dark grey panel</h2>
<p>This is a mid dark grey panel.</p>
</div>
</div>
Dark grey panel
Dark grey panel
This is a dark grey panel.
<div class="panel bg--grey-d">
<div class="inner">
<h2>Dark grey panel</h2>
<p>This is a dark grey panel.</p>
</div>
</div>
Centered panel
Centered panel
This is a red centered panel.
<div class="panel bg--red centered">
<div class="inner">
<h2>Centered panel</h2>
<p>This is a red centered panel.</p>
</div>
</div>