Build Ribbon CTA

Page Content

How to Use the Ribbon CTA Content Type

Ribbon CTA

The Ribbon CTA (call-to-action) content type provides a full-width row of content to highlight important pathways for visitors. You can add a bold heading and a short description along with one to three "arrow links" that can lead to various places. Ribbon CTAs can be used on any page layout and at any place within a page.

Learning objectives

  • Understand the purpose of the Ribbon CTA content type
  • Learn how to use the Ribbon CTA content type to draw attention to key actions

Instructions

From the T4 Site Structure, navigate to the page you are updating.

How to add a Ribbon CTA content type

  1. Click the "Add content" button.
  2. Select "Ribbon CTA" from the list of content types.
    • Name: Add descriptive name of content type to be used within T4 Site Structure.
    • Background color: Select black, blue, gray, light gray, teal, white, or yellow.
    • Heading: Required, used to add bold heading text. 
    • Description: Optional, used to add a short description about the call to action.
    • Arrow link 1 Open link in new tab: Select "Yes" if you'd like a new internet browser to open when a page viewer clicks on the link.
    • Choose only 1 of the following
      • Arrow link 1 (internal): Use only if linking to a page within your site. 
        • Add section link: Links to the top of a page within your site.
        • Add content link: The link anchors to a specific content type within a page on your site. 
      • Arrow link 1 (external): Paste URL of an external website (any webpage that is not part of your site, including other Mayo Clinic websites). 
    • Arrow link 1 text: Required, used to add the text that will display on the arrow link (ie, "Contact us" "Apply" "Enroll now")
    • Repeat above steps for arrow link 2 and arrow link 3, depending on the number of links you'd like to add to the Ribbon CTA content type (up to three links).
  3. Click the "Save changes" button to save content as a draft, or press the arrow and select "Save and approve" to save and publish updates.

Note: For sidebar layouts, the row only goes as far as the main content, creating a gap to the left or right. Using the stick to footer option will span the bottom of the page regardless of page layout.

Best practices

  • Use short, action-oriented headings and descriptions that clearly communicate the purpose
  • Choose background colors that provide enough contrast with your text and align with your page’s visual hierarchy
  • Background color choices include black, blue, gray, light gray, teal, white, and yellow
  • Only include links that are directly related to the call to action—too many can dilute its effectiveness
  • Add Ribbon CTAs in spots where users are most likely to be looking for the next step or decision point (like at the end of a section or page)

Additional resources

By now, you should feel confident using the Ribbon CTA content type to guide users toward important next steps with your content that stands out on any page.

Explore the possibilities: Content type examples

Browse through the examples below to see how the type can be used in different scenarios and design choices.

Heading Text

Short descriptive text. Color choices include black, blue, gray, light gray, teal, white, and yellow.

Learn about the Call to Action Bar

Additional information about links

Questions? Contact us.

Ready to enhance your content further?

Check out the next module.

Call-to-Action Bar
menu
Close