Callout Circles

Callout Circles

Callout circles provide a way to highlight certain information on a page. They were developed for use on the new program page, but can be used anywhere that you need to draw users' attention to high level information.

View

120 Total Credit Hours
$1000 Cost per Credit Hour
40 Total Classes Lasting 8 Weeks
10 Semesters to Complete

HTML

<div class="obj-grid obj-grid--gap-lg">
  <div class="obj-grid__6-12 obj-grid__3-12@md 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__3-12@md 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__3-12@md 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 class="obj-grid__6-12 obj-grid__3-12@md util-align-center">
    <div class="circle-info">
      <span class="circle-info__number">10</span>
      <span class="circle-info__label">Semesters to Complete</span>
    </div>
  </div>
</div>