Jump to HeaderJump to Main ContentJump to Footer
Digital Experience Studio
  • 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 Basics
  • 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

MSU Tools and Resources

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

This is Promotion Bar 1, encouraging visitors to learn more about applying to MSU. Visit Admissions.

This is Promotion Bar 2, encouraging individuals to learn facts about MSU. Notice the gradient helps differentiate it from the promotion bar above it.  Learn more.

This is Promotion Bar 3. These can also be colored green and do not have to use a link. 

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 Basics
    • 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

University Communications and Marketing

This is the Banner Title field

This is the Banner Description field. This is an MSU - Regular banner variant using medium, center aligned text in the default color, a gradient and no horizontal line.

Link text field
Digital Experience Studio > Website Technology > Sitecore CMS > Sitecore Demo Pages >

Demo: Information-Focused Content Components

This is an H2 Subheading Component

H3 subheading followed by a Side Tabs component:

This is the Section Title field

  • Tab 1 - Rich Text with Block Quote 

    • This is the default appearance of a Rich Text component in a tab or panel. 

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet est placerat in. Pulvinar pellentesque habitant morbi tristique. Velit euismod in pellentesque massa. Sodales ut etiam sit amet. 

    This paragraph has been formatted using the Rich Text Block Quote option. Tortor consequat id porta nibh venenatis. Ut eu sem integer vitae justo eget magna fermentum. Placerat in egestas erat imperdiet sed. Justo laoreet sit amet cursus sit amet dictum. Venenatis urna cursus eget nunc scelerisque viverra mauris in. 


    Mollis aliquam ut porttitor leo a diam sollicitudin tempor. Justo donec enim diam vulputate ut pharetra sit amet. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Felis eget velit aliquet sagittis id consectetur purus ut faucibus. Amet risus nullam eget felis eget nunc lobortis. 

    This is a Tabs Component:

    • Tab 1 - Rich Text with Block Quote 

      • This is the default appearance of a Rich Text component in a tab or panel. 

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet est placerat in. Pulvinar pellentesque habitant morbi tristique. Velit euismod in pellentesque massa. Sodales ut etiam sit amet. 

      This paragraph has been formatted using the Rich Text Block Quote option. Tortor consequat id porta nibh venenatis. Ut eu sem integer vitae justo eget magna fermentum. Placerat in egestas erat imperdiet sed. Justo laoreet sit amet cursus sit amet dictum. Venenatis urna cursus eget nunc scelerisque viverra mauris in. 


      Mollis aliquam ut porttitor leo a diam sollicitudin tempor. Justo donec enim diam vulputate ut pharetra sit amet. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Felis eget velit aliquet sagittis id consectetur purus ut faucibus. Amet risus nullam eget felis eget nunc lobortis. 

      This is an Accordion Component:

      Tab 1 - Rich Text with Block Quote 

      This is the default appearance of a Rich Text component in a tab or panel. 

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet est placerat in. Pulvinar pellentesque habitant morbi tristique. Velit euismod in pellentesque massa. Sodales ut etiam sit amet. 

      This paragraph has been formatted using the Rich Text Block Quote option. Tortor consequat id porta nibh venenatis. Ut eu sem integer vitae justo eget magna fermentum. Placerat in egestas erat imperdiet sed. Justo laoreet sit amet cursus sit amet dictum. Venenatis urna cursus eget nunc scelerisque viverra mauris in. 


      Mollis aliquam ut porttitor leo a diam sollicitudin tempor. Justo donec enim diam vulputate ut pharetra sit amet. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Felis eget velit aliquet sagittis id consectetur purus ut faucibus. Amet risus nullam eget felis eget nunc lobortis. 

      This is an Info Panel Component:

      This is text formatted to Heading 3

      This is an example of an Info Panel component. This text is in standard paragraph formatting.

      CTA Button:

      Learn MoreMSU HomeXMC Component Guide

      This is a Table component:

      This is a Text CTAs Component:

      Access additional resources

      MSU Brand Studio
      UCAM Website

      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|

    • Tab 2 - Rich Text with Column Splitter

      • To achieve this effect, apply a column splitter to the tab content area before adding any content. 

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet est placerat in. 

      Tortor consequat id porta nibh venenatis. Ut eu sem integer vitae justo eget magna fermentum. Placerat in egestas erat imperdiet sed. Justo laoreet sit amet cursus sit amet dictum. Venenatis urna cursus eget nunc scelerisque viverra mauris in. 

    • Tab 3 - Rich Text with Subheading, Column and Row Splitters

      • This is an H2 Subheading Component

      To achieve this one column followed by a two-column effect, apply a row splitter to the original tab content area. Then apply a column splitter to one of the two row content areas. Rows can be split multiple times but the column width of the nested rows decreases. Take care which rows you split multiple times in order to achieve a balanced look. 
       

      Mollis aliquam ut porttitor leo a diam sollicitudin tempor. Justo donec enim diam vulputate ut pharetra sit amet. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Felis eget velit aliquet sagittis id consectetur purus ut faucibus. Amet risus nullam eget felis eget nunc lobortis. 

      Tortor consequat id porta nibh venenatis. Ut eu sem integer vitae justo eget magna fermentum. Placerat in egestas erat imperdiet sed. Justo laoreet sit amet cursus sit amet dictum. Venenatis urna cursus eget nunc scelerisque viverra mauris in. 

    • Tab 4 - Image
      • An aerial view of Beaumont Tower. The STEM Building and Spartan Stadium are visible in the background. The sky is a bright blue and free of clouds, and the surrounding trees are a bright spring green. This is the image Caption field.
    • Tab 5 - Rich Text with Quote Box 

      • Tortor consequat id porta nibh venenatis. Ut eu sem integer vitae justo eget magna fermentum. Placerat in egestas erat imperdiet sed. Justo laoreet sit amet cursus sit amet dictum. Venenatis urna cursus eget nunc scelerisque viverra mauris in. 

      Sparty and the MSU Marching Band

      This is a quote box Quote field. - This is the quotation Author field

    • Tab 6 - Video Player
      • Video Thumbnail

      This is the video Title field.

      This is the video Caption field.

    • Tab 2 - Rich Text with Column Splitter

      • To achieve this effect, apply a column splitter to the tab content area before adding any content. 

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet est placerat in. 

      Tortor consequat id porta nibh venenatis. Ut eu sem integer vitae justo eget magna fermentum. Placerat in egestas erat imperdiet sed. Justo laoreet sit amet cursus sit amet dictum. Venenatis urna cursus eget nunc scelerisque viverra mauris in. 

    • Tab 3 - Rich Text with Subheading, Column and Row Splitters

      • This is an H2 Subheading Component

      To achieve this one column followed by a two-column effect, apply a row splitter to the original tab content area. Then apply a column splitter to one of the two row content areas. Rows can be split multiple times but the column width of the nested rows decreases. Take care which rows you split multiple times in order to achieve a balanced look. 
       

      Mollis aliquam ut porttitor leo a diam sollicitudin tempor. Justo donec enim diam vulputate ut pharetra sit amet. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Felis eget velit aliquet sagittis id consectetur purus ut faucibus. Amet risus nullam eget felis eget nunc lobortis. 

      Tortor consequat id porta nibh venenatis. Ut eu sem integer vitae justo eget magna fermentum. Placerat in egestas erat imperdiet sed. Justo laoreet sit amet cursus sit amet dictum. Venenatis urna cursus eget nunc scelerisque viverra mauris in. 

    • Tab 4 - Image
      • Students work in a WKAR studio. Video editing screens sit on a desk in front of them.This is the Image Caption field.
    • Tab 5 - Rich Text with Quote Box 

      • Tortor consequat id porta nibh venenatis. Ut eu sem integer vitae justo eget magna fermentum. Placerat in egestas erat imperdiet sed. Justo laoreet sit amet cursus sit amet dictum. Venenatis urna cursus eget nunc scelerisque viverra mauris in. 

      This is a quote box Quote field. - This is the quotation Author field

      Sparty and the MSU Marching Band
    • Tab 6 - Video Player
      • Video Thumbnail

      This is the video Title field.

      This is the video Caption field.

      Tab 2 - Rich Text with Column Splitter

      To achieve this effect, apply a column splitter to the tab content area before adding any content. 

      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Sit amet est placerat in. 

      Tortor consequat id porta nibh venenatis. Ut eu sem integer vitae justo eget magna fermentum. Placerat in egestas erat imperdiet sed. Justo laoreet sit amet cursus sit amet dictum. Venenatis urna cursus eget nunc scelerisque viverra mauris in. 

      Tab 3 - Rich Text with Subheading, Column and Row Splitters

      This is an H2 Subheading Component

      To achieve this one column followed by a two-column effect, apply a row splitter to the original tab content area. Then apply a column splitter to one of the two row content areas. Rows can be split multiple times but the column width of the nested rows decreases. Take care which rows you split multiple times in order to achieve a balanced look. 
       

      Mollis aliquam ut porttitor leo a diam sollicitudin tempor. Justo donec enim diam vulputate ut pharetra sit amet. Diam sollicitudin tempor id eu nisl nunc mi ipsum faucibus. Felis eget velit aliquet sagittis id consectetur purus ut faucibus. Amet risus nullam eget felis eget nunc lobortis. 

      Tortor consequat id porta nibh venenatis. Ut eu sem integer vitae justo eget magna fermentum. Placerat in egestas erat imperdiet sed. Justo laoreet sit amet cursus sit amet dictum. Venenatis urna cursus eget nunc scelerisque viverra mauris in. 

      Tab 4 - Image
      An old fashioned lantern streetlight shines in front of a brick campus residence hall.This is the Image Caption field.
      Tab 5 - Video Player
      Video Thumbnail

      This is the video Title field.

      This is the video Caption field.