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 >

Mixed Content

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|

Mixed Content

Mixed Content Containers and Components

Mixed Content containers add placeholder cells that hold a variety of types of content components. There are two types of Mixed Content containers: Mixed Content Full-Bleed, which takes up the entire page width, and Mixed Content Grid, which takes up the width of the content area. Each has multiple variants, detailed below.

Mixed Content components are placed in Mixed Content containers. Mixed Content components enable content authors to combine a headline, description text, a call to action, and image or YouTube video into one content block.

A mixed content full bleed component showing an aerial photo of campus
Figure 1: Example of a Mixed Content Full Bleed container. 

 

A mixed content component showing three images with accompanying text and CTA buttons for each
Figure 2: Example of a Mixed Content Grid container. 

Component Information

  • Usage
  • Best Practices
  • Tips and Tricks
  • Related Information

Benefits

  • The Mixed Content Full Bleed container allows the content author to provide an image or video, a title, descriptive text and a call-to-action button in a component spanning the entire width of the page.
  • The Mixed Content Grid container allows the content author to combine image or video, a title, descriptive text and a call to action in a variety of layouts, adding visual interest to the page.
  • All fields are optional. Any field left empty will not display.

Example Use Cases

  • Construct a visually interesting page with calls to action to various sections of a website.
  • Create calls to action to link to recommended resources and specific pages within a website.
  • Highlight images or video with accompanying text and a link to related information. 

Live Examples

  • Demo: Two-Thirds Layout and Mixed Content Components

Mixed Content Container Options

  • The Mixed Content Full Bleed container has two variants:
    • Image on Left
    • Image on Right
  • The Mixed Content Grid container has three variants:
    • One Column (an optional image next to text and an optional call to action button)
    • Two Columns (two columns with an optional image above text and an optional call to action button in each column)
    • Three Columns (three columns with an optional image above text and an optional call to action button in each column)

Mixed Content Component Options

  • Show Line — Adds a green line under the Title field.

Guidelines and Limitations

  • Mixed Content Grid components cannot be used in the right column of a Two-Thirds Page layout or a Two-Thirds Sublayout container.
  • A Mixed Content Full Bleed container can only be placed on a basic page.
  • The Image space can be used to hold a YouTube video. The YouTube video thumbnail will pull from the channel and cannot be customized within Sitecore.
  • Confirm call to action, or CTA, text is short and is not cut off due to button size.
  • Keep headlines and description text concise for best appearance.
  • Any field left empty will not display.
  • If an image field is left empty, the text fields will resize to fill in the available space. Be sure to preview content.
  • Preview on all device types and sizes to confirm the layout adapts to mobile properly.

Accessibility Considerations

  • Content authors must ensure that content displays properly in all the component areas, including the CTA button, in desktop, mobile and tablet views.
  • To add padding between a Mixed Content Full Bleed container and another component, use the padding options under the component Styling menu panel.
  • To use a Mixed Content Full Bleed container in a two-column layout, use a Two-Thirds Sublayout component instead of the Two-Thirds Page layout.
  • When using a YouTube video in the image placeholder, be careful when copying the video ID from the YouTube channel. Any additional character, including an extra space at the end, will cause an error and the video will not display.
  • Many fields are optional. If left empty, image, call to action and text fields will not display. 

Similar Components

  • Grid Container
  • Image Fact Grid
  • Text Fact Grid

Template Data

Mixed Content Full Bleed Component Fields in Page Builder

Design tab:

Variant (dropdown)
  • Image on Left (default)
  • Image on Right

Advanced Styling options:

Page Anchor ID (single line text)
  • Creates an anchor to the component which can be linked to using an anchor link

Component fields:

Image
  • Upload image
  • Browse media library
  • Optional field
YouTube ID (single line text)
  • Enter the video ID characters from the end of a YouTube video URL
  • The YouTube ID field overrides any image. Leave empty to display an image.
  • Optional field
Title (single line text)
  • Text that appears as the headline in the component
  • Optional field
Description (multi line text)
  • Text that appears as body copy in the component.
  • Optional field
CTA
  • Internal
  • External
  • Media
  • Email

Frequently Asked Questions

How do I add full-width components to a page that has a Two-Thirds Sublayout container?

When dragging a component from the Components list, be sure that “mainbody” displays before the component is dropped into the page.

Instructions for Use

Add Mixed Content Full Bleed Container to a Page 

In Page Builder:

  1. Select the page in the Content Tree. The page must use a basic Page layout.
  2. Click the “+” button in any full-width area Placeholder box below the Breadcrumb links.
  3. Select Mixed Content Full Bleed container from list.

Alternate method:

  1. Click Components tab at top of the Content Tree.
  2. Locate Mixed Content Full Bleed container.
  3. Drag the Mixed Content Full Bleed container to any empty full-width placeholder area of the page below the Breadcrumb links.

Choose a variant:

  1. Click the Design tab and select a variant from the Variant drop-down list:
    1. Image on Left
    2. Image on Right

Image Specifications

Sketch Link: Mixed Content

Mixed Content – One Column

  • Desktop – Width: 555px | Height: varies by image
  • Mobile – Width: full container / 305px | Height: 300px
  • Recommended size – Width: 600px | Height: 400px

Mixed Content – Two Column

  • Desktop – Width: 555px | Height: 384px
  • Mobile – Width: full container / 305px | Height: 300px
  • Recommended size – Width: 600px | Height: 400px

Mixed Content – Three Column

  • Desktop – Width: 360px | Height: 245px
  • Mobile – Width: full container / 305px | Height: 300px
  • Recommended size – Width: 600px | Height: 400px

Tool Use Guide

 

Documentation updated: June 4, 2026

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

Mixed Content Full Bleed Component Fields in Content Explorer

Title (single line text)

  • Text that appears as the headline in the component.
  • Optional field.

Description (multi line text)

  • Text that appears as body copy in the component.
  • Optional field.

Image

  • Upload image
  • Browse media library
  • Optional field.

YouTube ID (single line text)

  • Enter the video ID characters from the end of a YouTube video URL.
  • The YouTube ID field overrides any image. Leave empty to display an image.
  • Optional field.

CTA (choose type)

  • Internal
  • External
  • Media
  • Email
Mixed Content Grid Fields in Page Builder

Design tab

Variant (dropdown)
  • 1 Column
  • 2 Columns
  • 3 Columns
Advanced Styling options
Image Size (dropdown)
  • Large
  • Medium
  • Small
Page Anchor ID (single line text)
  • Creates an anchor to the component which can be linked to using an anchor link
Eyebrow Text (single line text)
  • Small text that appears at the top of the component
Mixed Content 1 Column Component Fields in Page Builder

Title (single line text)

  • Text that appears as the headline in the component.
  • Optional field.

Description (multi line text)

  • Text that appears as body copy in the component.
  • Optional field.

Image

  • Upload image
  • Browse media library
  • Optional field.

YouTube ID (single line text)

  • Enter the video ID characters from the end of a YouTube video URL.
  • The YouTube ID field overrides any image. Leave empty to display an image.
  • Optional field.

CTA (choose type)

  • Internal
  • External
  • Media
  • Email
Mixed Content 1 Column Component Fields in Content Editor

Title (single line text)

  • Text that appears as the headline in the component.
  • Optional field.

Description (multi line text)

  • Text that appears as body copy in the component.
  • Optional field.

Image

  • Upload image
  • Browse media library
  • Optional field.

YouTube ID (single line text)

  • Enter the video ID characters from the end of a YouTube video URL.
  • The YouTube ID field overrides any image. Leave empty to display an image.
  • Optional field.

CTA (choose type)

  • Internal
  • External
  • Media
  • Email
Mixed Content Component Fields in Page Builder

Title (single line text)

  • Text that appears as the headline in the component
  • Optional field

Description (multi line text)

  • Text that appears as body copy in the component
  • Optional field

Image

  • Upload image
  • Browse media library
  • Optional field

YouTube ID (single line text)

  • Enter the video ID characters from the end of a YouTube video URL.
  • The YouTube ID field overrides any image. Leave empty to display an image.
  • Optional field

CTA (choose type)

  • Internal
  • External
  • Media
  • Email
Mixed Content Component Fields in Content Editor

Title (single line text)

  • Text that appears as the headline in the component
  • Optional field

Description (multi line text)

  • Text that appears as body copy in the component
  • Optional field

Image

  • Upload image
  • Browse media library
  • Optional field

YouTube ID (single line text)

  • Enter the video ID characters from the end of a YouTube video URL.
  • The YouTube ID field overrides any image. Leave empty to display an image.
  • Optional field

CTA (choose type)

  • Internal
  • External
  • Media
  • Email
Where do I find the YouTube video ID to add a video in the image placeholder?

From a public video page, the video ID is the string of characters that appear after “watch?v=” in the video URL (available in the browser URL bar or from the Share link option on YouTube). If the video is in a list, do not include the character after the video ID starting with “&list=.”

From the Video Details pane on an owned YouTube channel, the video ID is the string of characters at the end of the Video link, displayed under the preview panel on the right side of the Video details page. 

Add Mixed Content Grid Container to a 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 Mixed Content Grid container from list.

Alternate method:

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

Choose a variant:

  1. Click the Design tab on the right side.
  2. Select a variant from the Variant drop-down list:
    1. 1 Column
    2. 2 Columns
    3. 3 Columns
Add Mixed Content Component to a Mixed Content Container 

Assign a component:

  1. Select a Mixed Content container.
  2. Click the “+” in the cell placeholder.
  3. Choose the available component. 
    1. Mixed Content 1 Column will appear when adding content to a Mixed Column Grid container 1 Column variant.
    2. Mixed Content will appear when adding content to a Mixed Column Grid container 2 Column or 3 Column variants or the Mixed Content Full Bleed container.

Alternative method:

  1. Open the Components menu.
  2. Locate the desired component under the Grid Components section of the menu.
  3. Click and drag to drop it in the appropriate column.

Note: 

  • Use a Mixed Content 1 Column component to place in a Mixed Column Grid container 1 Column variant.
  • Use a Mixed Content component to place in a Mixed Column Grid container 2 Column or 3 Column variant or the Mixed Content Full Bleed container. 
Add Content to a Mixed Content Component 

Assign content to the Mixed Content component:

  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 Create new, 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. To add a title, enter text in the Title field.
  4. To add additional text, enter text in the Description field.
  5. To add a link, click on the text on the button and use the right-side panel to set the Link Type, Link Text (what appears on the button) and URL (the link destination). Optional parameters are available to have the link open in a new window (appropriate when linking to a document or PDF).
  6. Adjust settings in the right panel, as needed.
  7. To add an image, click the image placeholder and use the right-side panel to add an image. Click Browse media library, locate the image in Media Library, Content Hub or upload an image, select the image and click Add selected.
  8. To add a video thumbnail to the image space, enter a YouTube video ID to the YouTube ID field below the image. Take care not to add extra spaces or characters when pasting a copied ID.
A screenshot of the YouTube ID filed in a mixed content component
Figure 3: The YouTube ID field appears on the black bar below the image placeholder.

 

Alternative: Edit Using Content Editor 

In Page Builder:

  1. Click the dropdown arrow to the right of the Sitecore XM Cloud icon in upper left.
  2. Select Content Editor. It opens in a new browser tab. 

In Content Editor:

  1. If the Mixed Content component does not appear in the Content Tree, close the page’s Data node and expand it again to refresh the Content Tree.
  2. In the Content Tree, expand Content > MSU > site name > Home > page name > Data or wherever the component was added.
  3. Locate and expand the Mixed Content component.
  4. Use the file location tool to select an image.
  5. Add text to necessary fields.  
  6. Click Save.
  7. Return to Page Builder. 

In Page Builder:

  1. Refresh the canvas.
  2. Click Actions and Submit to send the changes to the publishing workflow.
Examples

For a live demo of Mixed Content Grid and Mixed Content Full Bleed components, view the Demo: Two-Thirds Layout and Mixed Content Components page.