Jump to HeaderJump to Main ContentJump to Footer
Michigan State University
Michigan State University
Digital Experience Studio

University Communications and Marketing

Digital Experience Studio

  • Experience Program
    • Website Project Process
    • Working with a Vendor
    • Glossary
    • Taxonomy Data Dictionary
  • |
  • Experience Design
    • Website Strategy
    • Website Structure
    • Information Architecture and Navigation
    • User-Centered Design Conventions
    • Common UX Issues
    • Enterprise Design System
    • Content Planning
    • Creating Accessible Content
    • Taxonomy and Filters
  • |
  • Website Technology
    • Web Standards
    • Search Engine Optimization
    • Cascade CMS
    • Sitecore CMS
    • Content Hub Overview
    • Content Hub DAM
    • Content Hub Operations

    SitecoreAI

    Sitecore user login
  • |
  • Social Media
    • Alt Text Bookmarklet
    • Meta Ad Pixel
    • Social Media and Web Integration
    • Sprinklr

    Sprinklr

    Sprinklr user login
  • |
  • Analytics
    • Google Analytics (GA4)
    • Testing
    • Data Visualization

    Google Analytics

    Google Analytics user login
  • |
  • News and Events
    • News and Updates
    • Events and Trainings
Digital Experience Studio

University Communications and Marketing

  • Experience Program
  • Experience Design
  • Website Technology
  • Social Media
  • Analytics
  • News and Events

< Experience Program

  • Website Project Process
  • Working with a Vendor
  • Glossary
  • Taxonomy Data Dictionary

< Experience Design

  • Website Strategy
  • Website Structure
  • Information Architecture and Navigation
  • User-Centered Design Conventions
  • Common UX Issues
  • Enterprise Design System
  • Content Planning
  • Creating Accessible Content
  • Taxonomy and Filters

< Website Technology

  • Web Standards
  • Search Engine Optimization
  • Cascade CMS
  • Sitecore CMS
  • Content Hub Overview
  • Content Hub DAM
  • Content Hub Operations

SitecoreAI

Sitecore user login

< Social Media

  • Alt Text Bookmarklet
  • Meta Ad Pixel
  • Social Media and Web Integration
  • Sprinklr

Sprinklr

Sprinklr user login

< Analytics

  • Google Analytics (GA4)
  • Testing
  • Data Visualization

Google Analytics

Google Analytics user login

< News and Events

  • News and Updates
  • Events and Trainings
Digital Experience Studio > Website Technology > Sitecore CMS > Sitecore Component Guide >

Text Fact Grid

Michigan State University

MSU Tools and Resources

  • A to Z Index
  • Find People
  • Email
  • Tech Support
  • Social Media Directory

Communications Resources

  • University Communications and Marketing
  • University Trademarks and Licensing
  • MSU Brand Studio
  • MSU Editorial Style Guide
  • MSU Photos

Contact us

517-355-7505

Address

Michigan State University 408 West Circle Drive East Lansing, MI 48824

Follow Us

  • Visit our Facebook page
  • Visit our page on X
  • Visit our Instagram page
  • Visit our LinkedIn page
  • Visit our YouTube page
  • Visit our TikTok page

If you're having accessibility issues, please let us know.

Know MoreTransparency Reporting: Budget & Salary/Compensation
Michigan State University
  • Contact Information|
  • Site Map|
  • Privacy Statement|
  • Site Accessibility|
  • Call MSU: (517) 355-1855|
  • Visit: msu.edu|
  • Notice of Nondiscrimination|

SPARTANS WILL|© Michigan State University|

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

  • Usage
  • Best Practices
  • Template Data
  • Related 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

  • Demo: Grid Components

Component Options and Limitations

  • Content authors can select from four component variants with differing layouts: 
    • Image and 1 Column (Default)
    • Image and 2 Columns
    • Image and 4 Columns
    • Image and Triple Facts
    • No Image
  • Choose from a green or white background for the text area. The font color adjusts automatically.
  • Control if the image appears on the left or right side of the grid.
  • Add an optional green separator line below the header text.

Guidelines

  • Facts should be created in the system prior to adding the grid to the page.
  • Images should be uploaded prior to starting the grid.
  • Images should be carefully selected to fit within the grid.
  • Users are not required to fill all available fact spaces. For example, the Image and Triple Facts variant can be used with one fact instead of three.

Variant (droplist)

  • Choose the type of grid. 
  • Values:
    • Image and 1 Column (Default)
    •  Image and 2 Columns
    • Image and 4 Columns
    • Image and Triple Facts 
    • No Image

Background Color (droplist)

  • Choose the background color of the text. The font color will update automatically.
  • Values:
    • Green
    • White

Flip (checkbox)

  • When used with a grid that contains an image, this option will display the image on the opposite side of the grid.

Underline Header (checkbox):

  • This will add a small green separator below the grid’s title.

Header (single-line text)

  • Optional header for the grid
  • Optional body text that will go just below the Header

Related Components

  • Fact

Similar Components

  • Grid Container
  • Image Fact Grid

Instructions for Use

Add Text Fact Grid Component to Page

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, click the Design tab and choose the desired layout variant from the droplist. The layout on the page will update.
  4. Expand Advanced styling and adjust other styling options, as desired. 
Add Fact to Text Fact Grid

Variant Examples

Image and 4 Columns
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.
Image and 2 Columns

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

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

 

Documentation updated: June 12, 2026

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

  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.
Add Image to Text Fact Grid
  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.
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) .
Image and Triple Fact
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.
No Image
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.