Layout & Component Blocks

Info Block

Overview

An Info Block is a content component designed to guide users toward additional routes or related pages within a site. Its primary purpose is wayfinding, helping users discover relevant information or explore deeper content paths.

Unlike CTA Max or CTA Min components, which are focused on driving a specific action (such as signing up, requesting info, or downloading), an Info Block is not action-oriented. Instead, it provides contextual navigation by offering links to related topics, resources, or supporting content throughout the site.

View Info Block Demo

When to Use

  • Linking to related programs, courses, or departments within a page.
  • Guiding users to supporting resources like admissions info, financial aid, or campus services.
  • Adding branded colors and textures to your page, which are available as background themes.
How To

How To

Create a Info Block 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 Info Block Component for the component list.

Add Content to Info Block

  1. Heading: this is the heading that will display within the info block.
  2. Text: enter any supporting text for the heading and links.
Screenshot of info block editor showcasing the heading and text

Add Buttons

  • Minimum 1 button required, max 3
  • Buttons can link to URLs or popovers
Screenshot showing the info block editor with the button options

To Add a Button that Links 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.

Screenshot showcasing how to add a link to a button
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 showcasing how to add a popover

Save the Component

Once all buttons are added, click Save to commit changes.

User Experience Best Practices

  • Group related links together. Include one or two short sentences that explain why the links are helpful and relevant and use clear headings, and keep the number of links small.
  • Use informational language that encourages exploration, not action-oriented commands like “Sign Up” or “Register.”

Related Components