Callout Circles

Callout Circles display key statistics or metrics inside circular bordered containers. They are typically arranged in a grid row to present program highlights at a glance.

Callout Circles

120 Total Credit Hours

$1000 Cost per Credit Hour

40 Total Classes Lasting 8 Weeks

<div class="obj-grid obj-grid--gap-lg">
  <div class="obj-grid__6-12 obj-grid__4-12@lg util-align-center">
    <div class="circle-info">
      <span class="circle-info__number">120</span>
      <span class="circle-info__label">Total Credit Hours</span>
    </div>
  </div>
  <div class="obj-grid__6-12 obj-grid__4-12@lg util-align-center">
    <div class="circle-info">
      <span class="circle-info__number">$1000</span>
      <span class="circle-info__label">Cost per Credit Hour</span>
    </div>
  </div>
  <div class="obj-grid__6-12 obj-grid__4-12@lg util-align-center">
    <div class="circle-info">
      <span class="circle-info__number">40</span>
      <span class="circle-info__label">Total Classes Lasting 8 Weeks</span>
    </div>
  </div>
</div>

CSS Classes

Class	Description
.circle-info	Circular container (flexbox, centered, 175px on mobile, 225px on desktop)
.circle-info__number	Large bold number (2.25em mobile, 4em desktop)
.circle-info__label	Descriptive label text below the number

Layout

Circles use the grid system for responsive layout:

• 2 per row on mobile (obj-grid__6-12)
• 4 per row on medium screens (obj-grid__3-12@md)