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 >

Text CTAs

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|

Text CTAs

The Text CTAs component is used to display one to three links as calls to action. These appear on a full-width gray background in a main body content area of a page.

Screenshot of three text CTAs, including "Learn about MSU," "Explore our Academics," and "Discover our Research"
Figure 1: Example of a Text CTAs component, shown at the bottom of the MSU homepage, above the footer. This component has been styled with bold eyebrows (text that displays over the call to action) and bold link text, with arrows.

Component Information

  • Usage
  • Best Practices
  • Expected Behavior

Benefits

  • The Text CTAs component adds a gray block to a page to highlight one to three links.
  • Text CTAs is a full-width component that is used in a main body area of a page or a two thirds full bleed area of a twothirds sublayout or twothirds page.
  • This block’s gray background works well as a divider between white background components or next to green background components.

Live Example

  • Demo: Information-Focused Content Components

Component Options and Limitations

  • Links in a Text CTAs component may be displayed as text or as green buttons with white text.
  • The following text style options are available for the CTAs: regular (default, blank choice), bold, italics or bold with italics.
  • Text links may also display an arrow icon to the right of the text.
  • Eyebrow text may be added that displays at the top left above the links. This text also has the same four text style options.
  • If using the eyebrow text, a horizontal green line may be added underneath.
  • Text link descriptions will not wrap to additional lines when using a green button link style. Button sizes will adjust to text size, within limits. Preview the component to ensure text displays correctly without characters cutting off.

Guidelines

  • The Text CTAs component displays up to three calls to action.
  • If more than three CTAs are created in the same Text CTAs component, only the first three CTAs in the list will display.
  • There is not a specific character limit for the link text; however, if using the green button option, shorter text is best. Preview to ensure the text in the component displays correctly.
  • Clicking on each CTA will take the visitor to the linked page within the same browser window.
  • On mobile view the links stack. Be sure to test how the text looks at different display sizes and device settings and preview this stacking order.

Template Data

  • Component Fields
  • CTA Fields
Eyebrow: (single-line text)
  • The eyebrow is text that displays above the CTAs in the left corner.
  • Eyebrows can be edited in Page Builder, Content Editor or Explorer.
  • Eyebrows can be styled in Page Builder. Font options include regular (default, blank choice), bold, italics or bold with italic.
  • Eyebrows are optional.

Design Tab — Page Builder only:

Manage Items
  • Add new CTA
Eyebrow Style (drop-down menu)
  • This setting changes the font styling of the eyebrow text.
  • Options include regular (blank), bold, italics or bold with italics.
Horizontal Line (checkbox)
  • When checked, a small green horizontal line will appear under the eyebrow text.
  • The line will only appear if there is text in the eyebrow field.
Link Style (drop-down menu)
  • This setting changes the font styling of the link text.
  • Options include regular (blank), bold, italics or bold with italics.
Use Green Button for Links (checkbox)
  • When checked, the text links will display as green buttons with white text.
Use Arrow Icon for Links (checkbox)
  • When checked, an arrow icon displays after the CTA link text.
  • The “Use Green Button for Links” option overrides this setting. If the Green Button option is checked, arrow icons will not appear, regardless of the setting for this checkbox.

Page Builder — Link Element with Standard Link Options:

Link type (drop-down menu)
  • Options:
    • External
    • Internal
    • Media
Link text (single-line text)
  • This text displays as the link.
  • This is the same as “Link: Description” in Content Editor.
Path (general link)
  • This is a URL field with Browse button to identify the page the link will direct visitors to visit upon clicking.
Optional parameters
  • This includes additional link options that are rarely used.
  • Contact Comms.WebSupport@msu.edu with questions.

Content Editor:

Link (general link)
  • Insert link field with standard link options.
Description (single-line text)
  • Located in the Link Details 
  • The text here will display for the link, in either text form or in the button (depending on component settings).

Frequently Asked Questions

May I add a fourth CTA link to a Text CTAs component?

No, Text CTAs only display up to three links.

Can other content be added to the Text CTAs component?

Instructions for Use

Add Text CTAs Component to Page

In Page Builder:

  1. Select the page in the content tree.
  2. Click “+” button in a Placeholder box in the main body area of the page.
  3. Select Text CTAs component from list.

Alternate method:

  1. Click Components tab at top of content tree.
  2. Locate Text CTAs component.
  3. Drag the Text CTAs component to any empty placeholder area in the main body area of the page.

Add an existing or new data source:

  1. To create a new Text CTAs data set:
    1. Select the page’s Data folder.
    2. Use the “+ Create new” link to make a new Text CTAs component.
    3. Type in a name for the Text CTAs component and hit enter.
  2. To use an existing Text CTAs data set:
    1. Select the site’s main Data folder.
    2. Expand the Text CTAs folder.
    3. Select an existing Text CTAs component from the folder.
    4. Click on the Assign button.
Add Component Styling

Tool Use Guide

 

Documentation updated: June 29, 2026

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

No, the Text CTAs component is only for displaying CTA links.

In Page Builder:

  1. Select the placed Text CTAs component.
  2. Select the desired component options under the Advanced styling section. Options include:
    1. Eyebrow Style
    2. Horizontal Line
    3. Link Style
    4. Use Green Button for Links
    5. Use Arrow Icon for Links
Add CTA Links to Component
  1. Navigate to the Manage items section of Component Options.
  2. Click on “+ Add new” to add a CTA to the component.
  3. Optional: Change the CTA name. This does not display but is for system use.
  4. Change the order of the CTAs by clicking on the CTA, holding and dragging it up or down.
Note: If more than three links are added, only the first three will display.
Alternative Method: Content Editor

While most work on Text CTAs is best done in Page Builder, these tasks may also be done in Content Editor:

  • Rename the Text CTAs component and CTAs.
  • Edit the Text CTAs Eyebrow text.
  • Add or remove a CTA.
  • Edit the link details on a CTA.
Examples
Screenshot of a Text CTAs component on the Admissions website, with CTAs to Request information, Contact your counselor and Learn how to apply
Figure 2: Example of a Text CTAs component, shown at the bottom of the Admissions homepage, above the footer. This component has been styled with no eyebrows and regular link text, with arrows.

 

Screenshot of Text CTAs component on the Brand Studio website, with CTAs to Discover Brand Strategy and Download logos, design elements and templates
Figure 3: Example of a Text CTAs component, shown at the bottom of the MSU Brand Studio homepage, above the footer. This component has been styled with no eyebrow and bold link text, with arrows.

 

Screenshot of Text CTAs component with CTAs to Access additional resources and buttons for MSU Brand Studio and University Communications
Figure 4: Example of a Text CTAs component, shown at the bottom of a Digital Experience Studio homepage, above the footer. This component has been styled with bold eyebrow and bold link text, with green buttons.