Example of Factoid component being implemented


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

Factoids Example 

Component Specifications

Item/Field Description Required/Optional
Factoid Inner Number: 3
Display: Up to three cards in a row, fewer cards will
Card – Impact
Field type: Single line text
Text: Styled text (text, numbers, symbols)
Character Recommendation: 12
Wrapping: Single line
Card – Title   Field type: Single line text
Text: Styled text
Character Recommendation: 30
Wrapping: Single line 
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  
Mobile Response Factoids stack in mobile NA
Page Placement  Full Width NA
Accessibility Links within the description will be included in the
tab through 

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.