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).
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.
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.
The icon shrinks on smaller screens, otherwise there’s no change.
- Stylesheet location:
- 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
Pathway modals only.