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>