The Fact component is used to highlight an interesting data fact with some supporting text.
Component Information
Benefits
- The Fact component displays a large data fact (a number or short word) with brief supporting text inside of a box.
- A Fact may be set to link to another page. This is optional.
- A Fact is not placed on a page by itself. It is used inside of other components: Grid Container, Image Fact Grid or Text Fact Grid.
- Global Facts are also available for use across sites. Having Facts that serve site-wide or across sites ensures that the same Facts referenced in different locations use the same data, and that updates are made in all locations where a Fact is used.
- The minimalist text on background design helps provide some visual interest on grids when mixed with other types of components.
Example Use Cases
- Display the number of majors in a college and link to a page where prospective students can explore the programs.
- Highlight a program ranking.
- Emphasize a point of pride and link to a story with additional details.
- Create a visually interesting contact information page grid.
Component Options and Limitations
- The Fact component is not placed directly on a page but is used inside of other components. Current components enabled to host a Fact component include:
- Grid Container
- Image Fact Grid
- Text Fact Grid
- Additional style options are also available at the component level. For example: Image Fact Grid has green, translucent black and white background styles.
Guidelines
- Facts are a site-wide component. They are created in a site’s Data > Facts folder. Once created, the same Fact can be used across the site in multiple pages inside of multiple components.
- Global Facts are also available to use, if applicable. These are not editable by site content authors.
- The Fact data displayed will depend on the component the Fact is used in. For example, a Fact may display differently when placed in a Grid Container compared to an Image Fact. When making a Fact it is best practice to test it in each of the component types to make sure it looks good in all of them. This ensures a quality experience no matter where the Fact is used and in cases where it is re-used in the future.
Title — Text (Single-line Text)
- This field serves the large Fact text.
- There is a maximum length of 10 characters.
Title — Image (Image)
- This is used for approved scalable vector graphics, or SVG, icons.
- This will only display in a Text Fact Grid.
Subheading (Single-line Text)
- This is text that displays below the “Title — Text” when the Fact is added to Grid Container and Text Fact Grid components.
- There is a maximum length of 50 characters.
Description (Single-line Text)
- This is text that displays below the “Title — Text” when the Fact is added to an Image Fact Grid component.
Source (General Link)
- Use this insert link field to set a link for the Fact. If a link is added here, the Fact will link to the linked webpage.
- The link description text is not required. If it is added, the text will display below the “Title — Text” in an Image Fact Grid component.
