Layout & Component Blocks

CTA Max

Overview

The CTA (Call to Action) Max component provides a stylized section designed to encourage users to take a specific action aligned with the page’s goal—such as signing up, downloading a resource, or contacting your team. It serves as a clear, visually distinct prompt that guides users toward the next step in their journey.

View the CTA Max Demo

When to Use

  • As the final component on a page, reinforcing the primary goal.
  • When you want to drive conversions or engagement (e.g., “Get Started,” “Contact Us,” “Learn More”).
  • To highlight a single, focused action without distractions.
How To

How To

Create a CTA Max Component

  1. Navigate to the page you’d like to update, and enter the Edit Mode for the page
  2. Choose the Section you would like to add the block, click the plus (+) icon.
  3. Select the CTA Max Component component from the component list

Select the Theme

  1. This determines the background color of the component. 

Add the Component Heading

  1. Heading: the heading that appears above the image
  2. Subheading: this text appears to the right of the heading.
Screenshot of CTA Max component showcasing the theme selection dropdown and component header options

Add Primary Button

  1. Click Button: Link to URL/Email.
  2. In the URL field, start typing the title of the page you want to link to.
    1. Select the page from the list when it appears.
    2. If you are linking to a page outside the CU Denver website, paste the full URL (for example, https://www.example.edu) into the URL field instead.
  3. Enter the Link text.
    1. This is the text that will display on the button. Use clear, specific text for good user experience and web accessibility.
  4. Attributes:
    1. Target: Select New window (_blank) for external links only. Otherwise, leave this set to - None -.
    2. ARIA Label: For web accessibility, enter clear, specific text only if your link text is generic (for example, “Learn More.”) 
      1. As a rule, you should always use clear, specific link text and leave the ARIA Label field blank.

Add Secondary Button (optional)

  1. Follow the same steps as above to add a link to the secondary button

Linking Best Practice

Always select pages from the site when possible. Only paste full URLs for external sites.

Why This Matters

Linking to pages by selecting them from the list (instead of pasting a URL) helps prevent broken links if a page’s URL changes. This helps keep the CU Denver website reliable for our visitors.

Screenshot of CTA Max Component button section

Add the Media

  1. Click the Add Media button
  2. Upload an image or select the image from the media library.

Save the Component

  1. Click Save to commit all changes of the component

User Experience Best Practices

  • Make the Action Clear. Use concise, action-oriented language that tells users exactly what will happen when they click (e.g., “Request Information”, “Apply Now”).
  • Provide Context. Surround the CTA with supporting text or visuals that explain why the action is valuable. Users should understand the benefit before clicking.

Related Components