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: Two-Thirds Layout and Mixed Content Components

Demo: Two-Thirds Layout and Mixed Content 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|

The John Hannah Statue

This is the caption field of an Aside component.

Sample Curated Navigation

  • Sitecore User Guide
  • Demo: Grid Components
  • Demo: Information-Focused Content Components
  • Demo: Media-Focused Content Components
  • Demo: Two-Thirds Layout and Mixed Content Components
  • Sitecore Component Guide
  • MSU Home
  • Log in to XM Cloud

Two-Thirds Sublayout Section

This area of the page contains a Two-Thirds Sublayout section. The right column of this section contains a Contextual Navigation component. The left column of this section contains examples of Mixed Content Grid containers with Mixed Content components. The Mixed Content Grid containers seen below can also be used in a full-width section or on a basic Page layout. They resize to fill the content area.

Mixed Content Grid containers with Mixed Content components

Mixed Content Grid - 1 Column

Mixed Content Title A

The green line and button CTA are optional in all Mixed Content components. The image can appear on the right or left. In this case, there is no button included.

Students work in a WKAR studio. Video editing screens sit on a desk in front of them.
An old fashioned lantern streetlight shines in front of a brick campus residence hall.

Mixed Content Title B

In this case the green line has been removed, a video is in the image placeholder on the left and the text is on the right.

Watch on YouTube

Mixed Content Grid - 2 Columns

Mixed Content Title A

This is the body text. The optional image space above can also contain a video. Any text fields, like a link, that are left empty are omitted in preview or published views.

Mixed Content Title B

This is the body text. The optional image space above can also contain a video. Any text fields left empty are omitted in preview or published views.

Links are customizable.

Mixed Content Grid - 3 Columns

Mixed Content A

This is the body text. The optional image space above can also contain a video. 

Optional link space.

Mixed Content B

This is the body text. The optional image space above can also contain a video. 

Optional link space.

Mixed Content C

This is the body text. The optional image space above can also contain a video. 

Optional link space.

Full-Width Section

This section is below the Two-Thirds Sublayout section. This is now a full-width webpage area used to demonstrate the Mixed Content Full-Width container and Mixed Content components. Mixed Content Full Bleed containers do not have padding. The components will touch against whatever component they are positioned near, unless padding is added using the Styling options in the right-side menu.

Mixed Content Full Bleed Containers

 
 
 

Mixed Content Full Bleed

This is the Image on Left variant with a button.

Optional link button.

Mixed Content Full Bleed

This is the Image on Right variant with no button.