Homepage facts
About this component
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.
How to use for Homepage facts
Editable in the HTML (see “development info”).
Example of Homepage facts
Navy facts
White facts
Teal facts
Pathway modals only.
