Shapes (FloSports)

Simple Scalable Shapess

NOT Updated for FLO-SCSS yet

More inspiration here

Examples

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

Square

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>