Circle

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>