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.
Responsive behavior for Homepage facts
The icon shrinks on smaller screens, otherwise there’s no change.
How to use for Homepage facts
Editable in the HTML (see “development info”).
欧洲杯决赛竞猜app_欧洲杯足球网-投注|官网ment info for Homepage facts
Stylesheet location:
/_source/homepage/styles/_facts.scss
Edit the root-level index.html file. Include them in Foundation columns if needed (put the column divs around each <div class="fact">. Use class="inline-facts" for facts in columns.
<div class="facts"> <!-- class="facts light" for white facts, class="inline-facts" for columns -->
<div class="fact small-12 medium-x large-x cell card">
<i class="fas fa-icon-name"></i>
<div class="fact-details">
<p><span class="animate-count" data-delay="500">Number</span> Fact</p>
</div>
</div>
Example of Homepage facts
Navy facts
White facts
Teal facts
Pathway modals only.
