Digital Experience Studio > Website Technology > Sitecore CMS > XMC Component Guide >

Text Fact Grid

Text Fact Grid

A Text Fact Grid is a container for Fact components, displayed in table fashion with no borders or spacing between cells.

Screenshot of a text fact grid. Three facts appear in white and bright green text on a dark green background on the left. A photo of a faculty member lecturing appears on the right.
Figure 1: Example of a Text Fact Grid component. 

Component Information

Benefits

  • This component is used to display facts to help tell a story.
  • Facts can be used to help support brand and unit communications goals.

Example Use Cases

  • Call out numbers related to a story
  • Highlight data points alongside a related image or graphic

Live Example

Instructions for Use

In Page Builder:

  1. Select the page in the Content Tree.
  2. Click the “+” button in any Placeholder box below the Breadcrumb links.
  3. Select Text Fact Grid component from list.

Alternate method:

  1. Click the Components tab at top of Content Tree.
  2. Locate Text Fact Grid component.
  3. Drag the Text Fact Grid component to any empty placeholder area of the page below the Breadcrumb links.

Assign content:

  1. In the Assign content item window, choose the component data to use:
    1. For existing components, select them from the page’s Data folder or from the appropriate shared folder.
    2. For new components, select “+”, type in the component title and hit Enter.
  2. Once the component data is selected, click on the Assign button in the lower right corner.
  3. In the right pane, expand Advanced styling and choose the desired layout variant from the droplist. The layout on the page will update. 
  1. Click on the “+” symbol inside the appropriate grid container.
  2. Click on the Fact component in the menu. 
  3. Select the fact to be added to the grid. Click the “+” to create a new Fact.
  1. Click on the placeholder image in the grid to select it.
  2. In the right pane, click on the Add button and use the menu to choose an image. Click Add Selected.

Variant Examples

A photo of students crossing Farm Lane, viewed from above, is on the left. There are four fact spaces with white and bright green text on a dark green background on the right.
Figure 2: An Image and 4 Columns variant of the Text Fact Grid component with a green background, flipped.
Screenshot of a text fact grid. Two rows of two facts each appear on the left in white and bright green text on a dark green background. A photo of graduating students smiling at the camera appears on the right.
Figure 3: An Image and 2 Columns variant of the Text Fact Grid component with a green background, a component Header with underline, four Facts and the default display layout (i.e., not flipped).

 

Screenshot of a text fact grid. Two rows of two facts each appear on the left in white and bright green text on a dark green background. A photo of a lantern in front of a residence hall appears on the right.
Figure 3: An Image and 4 Columns variant of the Text Fact Grid component with a green background, no Header and four Facts with Fact Descriptions and the default display layout (i.e., not flipped) .
Screenshot of a text fact grid. Three facts appear in white and bright green text on a dark green background on the left. A photo of a faculty member lecturing appears on the right.
Figure 4: An Image and Triple Fact variant of the Text Fact Grid component with a green background, a Header with underline, three Facts with Fact Descriptions and the default display layout (i.e., not flipped). The variant does not require the use of all the available Fact spaces.

 

Screenshot of a text fact grid. Three facts appear in black and bright green text on a white background on the left. A photo of students in front of a computer screen is on the right.
Figure 5: An Image and Triple Fact variant of the Text Fact Grid component with a white background, placeholder text indicating the Header and Description without underline, three Facts with Fact Descriptions and the default display layout (i.e., not flipped). The variant does not require the use of all the available Fact spaces.
A screenshot of three facts on a white background.
Figure 6: Example of a Text Fact Grid component. This is the No Image variant with three facts, a white background and no header or header underline. One to four facts can be entered.

 

A screen shot of four facts on a dark green background.
Figure 7: Example of a Text Fact Grid component. This is the No Image variant with four facts, a green background and no header or header underline. One to four facts can be entered.

Image Specifications

Sketch Link: Text Fact Grid

Facts Overlay Image

  • Desktop – Width: 100% | Height: 622px
  • Mobile – Width: 100% | Height: 916px
  • Recommended size – Width: 2000px | Height: 1000px

Text Fact with Image - Large

  • Desktop – Width: 960px | Height: 737px
  • Mobile – Width: 100% | Height: 230px
  • Recommended size – Width: 1000px | Height: 800px

Text Fact with Image - Small

  • Desktop – Width: 478px | Height: 610px
  • Mobile – Width: 100% | Height: 220px
  • Recommended size – Width: 500px | Height: 600px

Tool Use Guide

 Page BuilderExplorerContent Editor
Add componentOptimal--
Select variantOptimal--
Flip layout (change side of image display)Optimal--
Select background colorOptimal--
Add header and/or descriptionOptimalPossiblePossible
Add header underlineOptimal--
Add image in gridOptimalPossiblePossible
Add Fact to componentOptimal--
Edit Fact*Optimal-Possible
Add/change image in Fact*Optimal-Possible

*Note: Any changes to a Fact apply globally across the website to any instance where that Fact is used.

 

Documentation updated: July 25, 2025

Is there an issue with this documentation? Report it here.