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>