The Circle
class allows for quick creation of circular containing elements
that fill the width of the parent element by default.
It may be sized using width
and colored using background-color
, preferably
via existing utility classes.
<div class="Circle ">
</div>
Inserting a Circle-content
element will center that element within the
circle. This may be used for icons or very small chunks of text.
<div class="Circle ">
<svg width="132" height="132" viewBox="0 0 132 132" class="Circle-content u-size3of4">
<path d="M85.2082,16H46.7918a7.708,7.708,0,0,0-7.7148,7.7063v23.063H92.923V23.7063A7.6927,7.6927,0,0,0,85.2082,16Zm.0224,24.9821a1.9526,1.9526,0,0,1-1.923,1.9412,1.9037,1.9037,0,0,1-1.9233-1.9412v-3.81a1.9524,1.9524,0,0,1,1.9233-1.9409,1.9035,1.9035,0,0,1,1.923,1.9409Z" />
<path d="M39.077,104.4477a7.6923,7.6923,0,0,0,7.692,7.706v1.9051A1.9037,1.9037,0,0,0,48.6923,116a1.9524,1.9524,0,0,0,1.923-1.9412v-1.9051h30.769v1.9051A1.9037,1.9037,0,0,0,83.3077,116a1.9524,1.9524,0,0,0,1.923-1.9412v-1.9051a7.708,7.708,0,0,0,7.6923-7.706V51.51H39.077ZM81.3844,57.2619a1.9344,1.9344,0,0,1,1.9233-1.9054,1.9,1.9,0,0,1,1.923,1.9054v7.7275a1.9344,1.9344,0,0,1-1.923,1.9054,1.9,1.9,0,0,1-1.9233-1.9054Z" />
</svg>
</div>