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 > XMC Demo Pages >

Demo: Grid Components

Sample Grid Container Components

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
  • Contact Information|
  • Site Map|
  • Privacy Statement|
  • Site Accessibility|
  • Call MSU: (517) 355-1855|
  • Visit: msu.edu|
  • Notice of Nondiscrimination|

SPARTANS WILL|© Michigan State University|

Small 2 and 1 (Newsletter)

Top Header

Top Subheader

Bottom Header

Bottom Subheader

Grid Ad documentation

Fact Title

Fact Subheading

2 Small (Stacked), 1 Large variant:

Fact Title

Fact Subheading

Fact Title

Fact Subheading

3 Small variant:

Top Header

Top Subheader

Bottom Header

Bottom Subheader

Grid Ad documentation

Fact Title

Fact Subheading

Follow us on social

4 Small (2x2), 1 Tall variant:

Top Header

Top Subheader

Bottom Header

Bottom Subheader

Grid Ad documentation

BOX CTA Header Field. The box CTA header can include quite a bit of text. The box CTA link is functional, but not displayed. in this case, the optional arrow icon is active.

Box CTA Sub-Header Field

Fact Title

Fact Subheading

Top Header

Top Subheader

Bottom Header

Bottom Subheader

6 Small (3x2) variant:

2X

Completed Admission RFI forms

+20%

Annual Website Traffic

1 Tall, 1 Large variant:

Top Header

Top Subheader

Bottom Header

Bottom Subheader

Grid Ad documentation

Top Header

Top Subheader

Bottom Header

Bottom Subheader

1 Tall, 4 Small (2x2) variant:

Top Header

Top Subheader

Bottom Header

Bottom Subheader

Learn more

Fact Title

Fact Subheading

BOX CTA Header Field. The box CTA header can include quite a bit of text. The box CTA link is functional, but not displayed. in this case, the optional arrow icon is active.

Box CTA Sub-Header Field

3 Tall variant:

Top Header

Top Subheader

Bottom Header

Bottom Subheader

Grid Ad documentation

2 Medium variant:

Top Header

Top Subheader

Bottom Header

Bottom Subheader

Learn more

X-Large (Single Column) variant:

Sample Text Fact Grid Components

Image and 2 Columns variant:

Header text test update

Description text test update

Fact Title

Fact Subheading

Fact Description

2X

Completed Admission RFI forms

Using new optimized campaign landing pages

+44%

Increased  website crawlability

Leading to improved search result rankings for the College of Engineering

+20%

Annual Website Traffic

Increased year over year on Admissions' Virtual Tour website with site optimizations

No Image variant, white background:

Fact Title

Fact Subheading

Fact Description

60%

Projected savings in development project costs

For the College of Education website redesign

2X

Improvement in Site Health Scores

For the College of Engineering website using SEMRUSH data

2X

Completed Admission RFI forms

Using new optimized campaign landing pages

Image and Triple Facts variant:

Optional: Header Field

Optional: Description Field

2X

Completed Admission RFI forms

Using new optimized campaign landing pages

2X

Improvement in Site Health Scores

For the College of Engineering website using SEMRUSH data

60%

Projected savings in development project costs

For the College of Education website redesign

Image and Triple Facts variant, flipped:

100+

Sprinklr custom data fields

Enabling enhanced measurement and analysis of social media

55%

Website carbon footprint improvement

For the College of Engineering, according to WebsiteCarbon.com

+20%

Annual Website Traffic

Increased year over year on Admissions' Virtual Tour website with site optimizations

Fact Title

Fact Subheading

Fact Description

No Image variant, green background:

Fact Title

Fact Subheading

Fact Description

60%

Projected savings in development project costs

For the College of Education website redesign

2X

Improvement in Site Health Scores

For the College of Engineering website using SEMRUSH data

2X

Completed Admission RFI forms

Using new optimized campaign landing pages

Sample Image Fact Grid Components

Translucent Black variant:

Fact Title

Fact Subheading

Fact Description

Fact Title

Fact Subheading

Fact Description

Fact Title

Fact Subheading

Fact Description

White variant:

Fact Title

Fact Subheading

Fact Description

Fact Title

Fact Subheading

Fact Description

Fact Title

Fact Subheading

Fact Description

Green variant:

Fact Title

Fact Subheading

Fact Description

Fact Title

Fact Subheading

Fact Description

Fact Title

Fact Subheading

Fact Description

Top Header

Top Subheader

Bottom Header

Bottom Subheader

Grid Ad documentation

Fact Title

Fact Subheading

Learn more

5-25%

Increase in Story Read Goal conversions

Learn more

Top Header

Top Subheader

Bottom Header

Bottom Subheader

Grid Ad documentation