Web services

Homepage facts

Facts are a quick way to show something interesting and relevant to the current content section in an eye-catching way. They provide supplemental information and are never links (except for the news story in the pathway modals, which isn’t a fact but uses the fact layout).

Guidelines

Facts include a relevant Font Awesome icon and a large number, with a short text description (keep it short!). Numbers include commas or the % symbol as needed. Facts aren’t clickable.

Teal facts are only in the pathway modals. Navy facts are used in sections with navy backgrounds, and white facts are used on the default white background.

Styling

No matter the color, the facts have a large vertically-centered icon on the left, a large and bold number above the description, and a short description below the number. They aren’t animated.

Navy facts have a white icon and description, a green number, and a teal border. Teal facts have a white icon, number, and description, and a darker teal border. White facts have a navy icon, a green number, a black description, and no border.

Responsive behavior

The icon shrinks on smaller screens, otherwise there’s no change.

Development info
  • Stylesheet location: /_source/styles/homepage/_facts.scss
  • Include them in Foundation columns if needed (put the column divs around each <div class="fact">. Use data-equalizer.
  • <div class="facts"> <!-- class="facts light" for white facts --> 
  <div class="fact">
    <div class="fact-icon">
      <i class=""></i>
    </div>
    <div class="fact-details">
      <p><span class="animate-count">number</span> description</p>
    </div>
  </div>
  ...
</div>

Homepage fact examples

Navy facts

Fact with a dark blue background, white icon on the left, a large green number, a white text description, and a teal border

White facts

Fact with a white background, dark blue icon on the left, a large green number, a black text description, and no border

Teal facts

Pathway modals only.
Fact with a dark teal background, white icon on the left, a large white number, a white text description, and a darker teal border