@@include('docs/_sidebar.html', {"page": "elements-shapes"})

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 fuchsia w-18 h-18"></div>
<div class="shape bg-dot sky w-18 h-18"></div>
<div class="shape bg-dot grape 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 fuchsia w-18 h-18"></div>
<div class="shape bg-line sky w-18 h-18"></div>
<div class="shape bg-line grape 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 fuchsia rounded-circle w-18 h-18"></div>
<div class="shape bg-line sky rounded-circle w-18 h-18"></div>
<div class="shape bg-line grape 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-fuchsia w-18 h-18"></div>
<div class="shape bg-soft-sky w-18 h-18"></div>
<div class="shape bg-soft-grape 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-fuchsia rounded-circle w-18 h-18"></div>
<div class="shape bg-soft-sky rounded-circle w-18 h-18"></div>
<div class="shape bg-soft-grape 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>

SVG

Available color options:

primary, aqua, green, leaf, navy, orange, pink, purple, red, violet, yellow, fuchsia, sky, grape, pale-primary, pale-aqua, pale-green, pale-leaf, pale-navy, pale-orange, pale-pink, pale-purple, pale-red, pale-violet, pale-yellow, pale-fuchsia, pale-sky, pale-grape, soft-primary, soft-aqua, soft-green, soft-leaf, soft-navy, soft-orange, soft-pink, soft-purple, soft-red, soft-violet, soft-yellow, soft-fuchsia, soft-sky, soft-grape.

View example's code

<div class="shape primary w-18 h-18">
  <img src="./assets/img/svg/hex.svg" class="svg-inject icon-svg w-100 h-100" alt="" />
</div>

<div class="shape primary w-18 h-18">
  <img src="./assets/img/svg/tri.svg" class="svg-inject icon-svg w-100 h-100" alt="" />
</div>

<div class="shape primary w-18 h-18">
  <img src="./assets/img/svg/circle.svg" class="svg-inject icon-svg w-100 h-100" alt="" />
</div>

Doodles

View example's code

<img src="./assets/img/svg/doodle1.svg" class="h-14" alt="">
<img src="./assets/img/svg/doodle2.svg" class="h-14" alt="">
<img src="./assets/img/svg/doodle3.svg" class="h-14" alt="">
<img src="./assets/img/svg/doodle4.svg" class="h-14" alt="">
<img src="./assets/img/svg/doodle5.svg" class="h-14" alt="">
<img src="./assets/img/svg/doodle7.svg" class="h-14" alt="">
<img src="./assets/img/svg/doodle8.svg" class="h-14" alt="">
<img src="./assets/img/svg/doodle9.svg" class="h-14" alt="">
<img src="./assets/img/svg/doodle10.svg" class="h-14" alt="">
<img src="./assets/img/svg/doodle11.svg" class="h-14" alt="">
<img src="./assets/img/svg/doodle6.svg" class="h-14" alt="">

Shapes

Dot

Line

Solid

SVG

Doodles