Shapes (FloSports)

Simple Scalable Shapess

NOT Updated for FLO-SCSS yet

More inspiration here

Ensure responsive shapes with a .square, or .circle container and and .position-absolute or .shape-content

default 25% width

<div class="square bg-primary">
  <div class="shape-content">
    default 25% width
  </div>
</div>

10% width

<div class="square bg-primary w-10">
  <div class="shape-content">
    10% width
  </div>
</div>

33% width

<div class="square bg-primary w-33">
  <div class="position-absolute center-x center-y text-white">
    33% width
  </div>
</div>

### Circle

33% width

### Circle

<div class="circle bg-primary w-33">
  <div class="position-absolute center-x center-y text-white">
    33% width
  </div>
</div>