Digital Style Guide

Welcome to the digital style guide for your brand.

Panels #

Panel

Default panel

This is a default panel.

(↓) Download | </> Show code

<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.

(↓) Download | </> Show code

<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.

(↓) Download | </> Show code

<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.

(↓) Download | </> Show code

<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.

(↓) Download | </> Show code

<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.

(↓) Download | </> Show code

<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.

(↓) Download | </> Show code

<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.

(↓) Download | </> Show code

<div class="panel bg--red centered">
    <div class="inner">
        <h2>Centered panel</h2>
        <p>This is a red centered panel.</p>
    </div>
</div>