Factoid
Description
This component helps highlight key facts or statistics on a page.
On-page Example
To preview a live example of the component or inspect the code, click the link below
Component Specifications
| Item/Field | Description | Required/Optional |
|---|---|---|
| Factoid Inner | Number: 3 Display: Up to three cards in a row, fewer cards will center |
Required |
| Card – Impact Number |
Field type: Single line text Text: Styled text (text, numbers, symbols) Character Recommendation: 12 Wrapping: Single line |
Required |
| Card – Title | Field type: Single line text Text: Styled text Character Recommendation: 30 Wrapping: Single line |
Required |
| Card – Description | Field type: Multi line field with linking capabilities Text: Paragraph Character Recommendation: 90 Wrapping: Wrap to two lines Links: Blue by default, underline on hover |
Required |
| Mobile Response | Factoids stack in mobile | NA |
| Page Placement | Full Width | NA |
| Accessibility | Links within the description will be included in the tab through |
NA |
When to Use
This component is best to use when one wants to highlight and visually represent key facts and figures with succinct, straightforward headline and subtext.
When to Consider Something Else
If you need to add more text or want add an image it would be better to explore other content items.
How to Use
There will be three available sections to enter facts into. For each section add a number/statistic that is the main focus of the chosen fact. Underneath that, add a short headline that explains what the fact's figure represents. Finally, add a brief sentence providing more detail about the featured figure beneath the headline.
Accessibility Tips
This component features live text that should be readable by most screen-readers. Please do not add extra styling that isn't already a part of the component. Also make sure to place this component on a white or very light background so that the text can be clear and visible.