Layout & Component Blocks

CTA Min

Overview

The CTA (Call to Action) Min 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 Min 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 Min 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 Min Component component from the component list.

Select the Text Alignment

  • This determines the area where the text overlays the image background.

Enter The Text

  1. Heading: the heading that appears in the text content area.
  2. Text: enter the body content for the CTA Min.
Screenshot of the CTA Min component editor showing the text alignment dropdown, heading, and text field.

Add Buttons

This component allows for two button link types: a url/email or a popover. Please review the popover content type page to learn how to create a popover. 

  1. Add the Primary button link.
  2. Add Secondary button link (optional).
Screenshot of the button and image form fields within the CTA Min component editor

To Add A Button

To Add a Link to URL / Email
  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.
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.

To Add a Popover

Before you begin: Make sure the Popover content already exists. You can create popovers at Content > Add content > Popover.

  1. Select Add Button: Popover from the dropdown arrow button.
  2. Enter the Button text.
    1. This is the text that will display on the button. Use clear, specific text for good user experience and web accessibility.

  3. In the Popover Content field, start typing the title of the popover you want to use.

    1. Select the desired Popover from the list when it appears.

Screenshot of the popover component editor showing the heading and link field

Add the Media and Save

  1. Click the Add Media button.
    1. Minimum required image dimensions: 1358px width by 764px height.
    2. Recommended dimensions: 2716px width by 1528px height.
  2. Upload or select the image you want to select.
  3. To save image, click Insert Selected button.
  4. Click Save on the component to commit all changes.
Screenshot of image upload modal showing how to search or upload image.

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