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 >

Grid Ad

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|

Grid Ad

A combination of text, a background image and a call to action, or CTA, button. Text can appear at the top and bottom of the component. This component can be displayed in a Grid Container component for a tiled layout.

grid-ad-example
Figure 1: Example of a Grid Ad component from the Academic Governance website.

 

Component Information

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

Benefits

  • The Grid Ad is a versatile component that allows the content author to create a combination of text (including several lines, positions and font sizes), a background image and a call to action, or CTA, button to display in a Grid Container with other made-for-grid components.
  • The Grid Ad must be used in a Grid Container. It cannot be placed on a page without using one of these components.
  • The Grid Container is full page-width. It extends from one edge of the browser window to the other, spanning the width of the site. This expansive view pulls visitor focus to the grid images.

Example Use Cases

  • Provide a small snippet of text and keywords with a button link to a story or event page.
  • Provide visual imagery to attract visitor attention, text that summarizes detailed content and a button link that directs visitors to a page with more content.
  • Highlight a particular page and provide an easy way for visitors to get to it.

Component Options and Limitations

  • The Grid Ad is limited to certain page types:
    • A Grid Ad can be placed on the “Page” page type within a Grid Container.
    • A Grid Ad can be placed in the left column of a “Two-Thirds Page” page type within a Grid Container.
    • A Grid Ad component cannot be added to a “Story Page” or any other page type.
  • The Grid Ad component is not suitable for lengthy text. It is intended for short headings and sub-headings. If text is too long, the Top text may display overlaying the Bottom text, may force the Bottom text to truncate or may cause the component layout to break.
  • Depending on the grid tile size selected, not all Grid Ad component fields will display. See the Template Data section below for additional information.
  • Data (content) is created for a specific component. Sitecore will not allow Data to be assigned to another type of component. For example, a Data>Grid Ad item cannot be assigned to a Hero Banner component.

Guidelines

  • The call to action, or CTA, button destination may be an internal page, a media item, an external page, another asset or an email address.
  • Only the background image is a required field. Although not designated as required, at least one line of text or the CTA should be specified.
  • The CTA button is optional.
  • When placing a Grid Ad in a small tile of a Grid Container, it will look best when either Top or Bottom text are used, but not both.
  • Test view a Grid Ad using multiple devices to verify that text displays properly and is not too long. For example, what looks good in desktop mode may not look good in mobile mode.
  • Since the Grid Container has multiple tiles, it is important to balance the look and feel of the Grid Ad with other tiles in the grid.
  • In Page Builder, the Eyebrow field may not be visible. Always use Preview (the eye icon in upper right) to see what the page will look like in a browser
  • The link is a button. It cannot be a text or image link.
  • The Grid Ad component may look slightly different in each tile size. 
  • Certain grid sizes do not provide sufficient space in the Grid Ad tile to display all fields.
    • Small cell: If using all fields (Eyebrow, Top, Bottom and CTA button), not all content will display. Experiment with fields and font sizes to make content fit and be sure to test in desktop, tablet and mobile views.
    • Depending on length of text and which text fields are used, some content items may not display in other tile sizes. 
  • The button background color is dark green by default. This can be altered by adding CSS in the right column’s Additional Styles CSS field.
  • On button hover, the background image expands slightly.
  • Text is white by default. When “White Gradient” is selected, black text is automatically used instead of white text.
  • No spacing is provided between a Grid Container and other components. No spacing is added between tiles in the grid.
  • By default, the Eyebrow text displays at the top of a tile. Selecting the Up option also causes Eyebrow to display at top of tile. Selecting the Down option causes Eyebrow to display above the Bottom text field.
  • Eyebrow text is automatically displayed as uppercase using a small font size.

Related Components

  • Grid Container

Live Examples

  • Demo page: Grid components

Template Data

  • Component Fields
  • Component Advanced Styling Fields
  • CTA Button Fields

Image (image)

  • Background image for the Grid Ad component. It fills the entire tile.
  • Required field.

Eyebrow (single-line text)

  • Title that displays at the top of the component.
  • The text is automatically converted to uppercase regardless of how text is entered.

Top Header (single-line text)

  • Text that displays in large font at top of component, if present.
  • If the Grid Ad component is placed in a Large or Tall grid tile, the Top Header does not display.
  • If the Grid Ad component is placed in a Small grid tile and if both Top and Bottom fields are entered, only the Eyebrow and Bottom fields are displayed.

Top Sub-Header (multi-line text)

  • Text that displays in a medium-sized font at the top of the component, if present, and below the Top Header, if one is present.
  • If the Grid Ad component is placed in a Large or Tall grid tile, the Top Sub-Header text does not display.

Bottom Header (single-line text)

  • Text that displays in a medium-sized font at the bottom of the component, if present.
  • The text is automatically converted to uppercase regardless of how text is entered.

Bottom Sub-Header (multi-line text)

  • Text that displays in a medium-sized font at the top of the component, if present, and below the Bottom Header, if one is present.

CTA (droptree)

  • An optional button that displays at the bottom of the component.
  • Values:
    • None (default)
    • Call to Action button
  • The button will only display if at least one of the Top or Bottom fields is used.

ID

  • Not used 

CSS Styles

  • Not used

Gradient (dropdown menu)

  • Optionally adds a slight gradient to the image.
  • Values:
    • Black (default)
    • Green
    • White

Eyebrow Position (dropdown menu)

  • Location where the Eyebrow text displays.
  • Values:
    • Up — This is the default. The Eyebrow displays above the Top text area.
    • Down — The Eyebrow displays above the Bottom text area.

Text Alignment (dropdown menu)

  • Determines whether all text is displayed as left justified or centered in the component.
  • Values:
    • Center Align (default)
    • Left Align

Green Line (checkbox)

  • An optional decorative green bar that displays between the Top Header and Top Sub-Header fields.
  • Values:
    • Checked (default) 
    • Unchecked

Use Large Bottom Header Text (checkbox)

  • Option to display this field with large text rather than the default small-sized text.
  • Values:
    • Unchecked (default)
    • Checked

Use Small Bottom Sub-Header Text (checkbox)

  • Option to display this field with small text rather than the default medium-sized text.
  • Values:
    • Unchecked (default)
    • Checked

Link type

  • Selects the type of link to insert.
  • Three main options:
    • External (for a link not in this site)
    • Internal (a link in this site)
    • Media (a link to a media file)
    • Email (the button generates an email draft in the default user's email browser to a specified email address)

URL/Path (general link)

  • The Call to Action link destination
  • Required field when using a CTA button

Link text (single-line text)

  • The text that displays on an optional Call to Action button.
  • Be concise. Text that does not fit is truncated.

Open in new window (checkbox)

  • When checked link opens in a new window.

Frequently Asked Questions

Which fields are required?

Technically, only the image is required. However, at least one text field should be specified.

How to I test for color contrast between background image and text?

Image Specifications

Grid XLarge

  • Desktop – Width: 100% | Height: 810px
  • Mobile – Width: 100% | Height: 573px
  • Recommended size – Width: 2000px | Height: 1000px

Grid Large

  • Desktop – Width: 960px | Height: 810px
  • Mobile – Width: 375px | Height: 536px
  • Recommended size – Width: 1000px | Height: 1000px

Grid Medium

  • Desktop – Width: 50% / 720px | Height: 810px
  • Mobile – Width: 100% | Height: 300px
  • Recommended size – Width: 800px | Height: 900px

Grid Small

  • Desktop – Width: 33% / 480px | Height: 405px
  • Mobile – Width: 100% | Height: 300px
  • Recommended size – Width: 500px | Height: 500px

Grid Tall

  • Desktop – Width: 33% / 480px | Height: 810px
  • Mobile – Width: 100% | Height: 300px
  • Recommended size – Width: 500px | Height: 900px

Instructions for Use

Preparation

Add a Grid Container to the page where the Grid Ad component is needed, and select the desired variant.

Tool Use Guide

Documentation updated: June 15, 2026

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

Users can use a color contrast analyzing tool to check color contrast. There should be a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (at least 18 pt.) or bold text.

Read more about color use on the MSU Brand Studio website, under RGB/Hex Accessible Pairings. Read more about accessibility standards on the Digital Accessibility website.

What should I do if color contrast is not accessibility compliant?

Simply adjust the text color, background color or background image to ensure the color contrast is compliant to accessibility standards.

Add Grid Ad Component to Grid Container

In Page Builder:

  1. Click the grid container to display the toolbar.
  2. Click the “+” in a tile and under Components, select Grid Ad.
  3. Hover over the Data folder in the pop-up window. Click “+” to the right of Data and add a component.
  4. Click Grid Ad to add the component. Give it a name that is unique within the page.
  5. Click the Grid Ad to be assigned to the grid container cell, and click Assign.

Alternate method:

  1. Click Components tab at the top of the content tree.
  2. Locate Grid Components section.
  3. Drag the Grid Ad to the tile in the Grid Container.
  4. In the “Assign content item” dialog box, select the appropriate item.
  5. Click Assign.
Apply Styling to Grid Ad

In Page Builder, with the Grid Ad selected, expand Advanced Styling and apply settings, as desired:

  • ID — not used
  • CSS Styles — not used
  • Gradient — Shading is applied to the background image for better contrast with text; choose Black (default), Green or White.
  • Eyebrow Position — Display Eyebrow position; choose Up (default, above Top text) or Down (above Bottom text)
  • Text Alignment — Align all text; choose Center (default) or Left justified
  • Green Line — Check to display a decorative green line between the Top Header and Top Subheader.
    • If Top text is blank, no green line displays, even if Top Subheader is empty.
    • Checking this option has no effect on Bottom text.
  • Use Large Bottom Header Text — Check to use large text. This affects the Bottom Header only.
  • Use Small Bottom Sub-Header Text — Check to use small text. This affects the Bottom Sub-Header only.
Add Content to Grid Ad

Add Text

  • Text fields, including Top Header, Top Sub-Header, Bottom Header and Bottom Sub-Header, can be entered directly in the respective Pages fields.
  • There is no specific character limit on text fields. If text is too long, the top and bottom text will either run together or the text is truncated to fit in the component, depending on the field(s). If this happens, text must be shortened. Be sure to preview.

Add Background Image

  1. Click image in the component.
  2. In “Image” right column:
    1. Click Add.
    2. Select an image from Media Library.
    3. Click Add selected.
  3. Use Content Editor to add alt text on image — see alternate method for instructions, below. Alt text can also be added to an image when it is uploaded into Media Library or Content Hub.

Add a Call to Action, or CTA, Button

  1. Click the CTA field in the component.
  2. In “CTA Button” right column, expand and set options, as needed:
    1. Link Type — Choose Internal, External or Media destination.
    2. Link Text — Add the text that will appear on the button.
    3. URL — This will depend on the type of link
    4. Open in new window — Check the box to have the CTA link open in a new browser window or tab.
    5. Click Clear link value to remove the CTA button.

Submit to Publishing Workflow

  1. Click Actions button.
  2. Click Submit.
Alternative Method: Adding and Changing Content in Content Editor

In Page Builder:

  1. Click the dropdown arrow to the right of the SitecoreAI icon in upper left.
  2. Select Content Editor.

In Content Editor:

  1. Locate the Grid Ad component in the content tree.
  2. Make necessary changes in each field.
Note: An existing Grid Ad can be duplicated in Content Editor and then changed as needed.
  1. Return to Page Builder.
  2. Refresh the canvas to see changes.
  3. Preview the page.
  4. Click Actions button.
  5. Click Submit.
Examples
grid-ad-admissions-example
Figure 3: A Grid Container (6 small variant) on the Admissions website contains a Grid Ad component. The Grid Ad component reads “1000+ Student Clubs.”

 

grid-ad-engineering-example
Figure 4: A Grid Container (6 small variant) on the Engineering website contains three Grid Ad components. The "Spring Commencement," "Colloquium Event," and "Design Day" event squares are Grid Ad components.