Sandbox

Dot

View example's code

<div class="shape bg-dot yellow w-18 h-18"></div>
<div class="shape bg-dot orange w-18 h-18"></div>
<div class="shape bg-dot red w-18 h-18"></div>
<div class="shape bg-dot pink w-18 h-18"></div>
<div class="shape bg-dot violet w-18 h-18"></div>
<div class="shape bg-dot purple w-18 h-18"></div>
<div class="shape bg-dot blue w-18 h-18"></div>
<div class="shape bg-dot aqua w-18 h-18"></div>
<div class="shape bg-dot green w-18 h-18"></div>
<div class="shape bg-dot leaf w-18 h-18"></div>
<div class="shape bg-dot navy w-18 h-18"></div>
<div class="shape bg-dot ash w-18 h-18"></div>
<div class="shape bg-dot white w-18 h-18"></div>

Line

View example's code

<div class="shape bg-line yellow w-18 h-18"></div>
<div class="shape bg-line orange w-18 h-18"></div>
<div class="shape bg-line red w-18 h-18"></div>
<div class="shape bg-line pink w-18 h-18"></div>
<div class="shape bg-line violet w-18 h-18"></div>
<div class="shape bg-line purple w-18 h-18"></div>
<div class="shape bg-line blue w-18 h-18"></div>
<div class="shape bg-line aqua w-18 h-18"></div>
<div class="shape bg-line green w-18 h-18"></div>
<div class="shape bg-line leaf w-18 h-18"></div>
<div class="shape bg-line navy w-18 h-18"></div>
<div class="shape bg-line ash w-18 h-18"></div>
<div class="shape bg-line white w-18 h-18"></div>
                      
<div class="shape bg-line yellow rounded-circle w-18 h-18"></div>
<div class="shape bg-line orange rounded-circle w-18 h-18"></div>
<div class="shape bg-line red rounded-circle w-18 h-18"></div>
<div class="shape bg-line pink rounded-circle w-18 h-18"></div>
<div class="shape bg-line violet rounded-circle w-18 h-18"></div>
<div class="shape bg-line purple rounded-circle w-18 h-18"></div>
<div class="shape bg-line blue rounded-circle w-18 h-18"></div>
<div class="shape bg-line aqua rounded-circle w-18 h-18"></div>
<div class="shape bg-line green rounded-circle w-18 h-18"></div>
<div class="shape bg-line leaf rounded-circle w-18 h-18"></div>
<div class="shape bg-line dark rounded-circle w-18 h-18"></div>
<div class="shape bg-line ash rounded-circle w-18 h-18"></div>

Solid

All background color options (solid, soft, pale) are available to use.

View example's code

<div class="shape bg-soft-yellow w-18 h-18"></div>
<div class="shape bg-soft-orange w-18 h-18"></div>
<div class="shape bg-soft-red w-18 h-18"></div>
<div class="shape bg-soft-pink w-18 h-18"></div>
<div class="shape bg-soft-violet w-18 h-18"></div>
<div class="shape bg-soft-purple w-18 h-18"></div>
<div class="shape bg-soft-blue w-18 h-18"></div>
<div class="shape bg-soft-aqua w-18 h-18"></div>
<div class="shape bg-soft-green w-18 h-18"></div>
<div class="shape bg-soft-leaf w-18 h-18"></div>
<div class="shape bg-soft-navy w-18 h-18"></div>
<div class="shape bg-soft-ash w-18 h-18"></div>
<div class="shape bg-soft-white w-18 h-18"></div>
                      
<div class="shape bg-soft-yellow rounded-circle w-18 h-18"></div>
<div class="shape bg-soft-orange rounded-circle w-18 h-18"></div>
<div class="shape bg-soft-red rounded-circle w-18 h-18"></div>
<div class="shape bg-soft-pink rounded-circle w-18 h-18"></div>
<div class="shape bg-soft-violet rounded-circle w-18 h-18"></div>
<div class="shape bg-soft-purple rounded-circle w-18 h-18"></div>
<div class="shape bg-soft-blue rounded-circle w-18 h-18"></div>
<div class="shape bg-soft-aqua rounded-circle w-18 h-18"></div>
<div class="shape bg-soft-green rounded-circle w-18 h-18"></div>
<div class="shape bg-soft-leaf rounded-circle w-18 h-18"></div>
<div class="shape bg-soft-dark rounded-circle w-18 h-18"></div>
<div class="shape bg-soft-ash rounded-circle w-18 h-18"></div>

Shapes

Dot

Line

Solid

Think unique and be creative. Make a difference with Sandbox.

Usage

Styleguide

Elements

Shapes

Dot

Line

Solid

Think unique and be creative. Make a difference with Sandbox.