Layout & Component Blocks

Link List

Overview

Intro

A Link List is a simple, structured component used to display a collection of related links in an organized format. It helps users quickly navigate to relevant pages or resources without clutter, improving wayfinding and content accessibility.

View Link List Demo

When to Use

  • Provide quick access to related resources, tools, or pages.
  • Organize supporting links for a topic, program, or service.
  • Enhance navigation in sidebars, footers, or resource hubs.

How To

Create a Link List 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 Link List Component for the component list

Add a Component Header

  1. Click Add a Component Header button
Learn How to Add a Component Header
Screenshot of the Link List editor with the component header button and item area

Add Buttons to the Link List

This component supports up to five buttons, each of which can link to a file download, content/page within the site, a webpage URL, or an email address.

Screenshot of button link component options: download file or URL

To Add a Button that Links to URL/Email

  1. Click the plus sign (+) icon and select the
  2. Click Button: Link to URL/Email.
  3. 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.
  4. 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.
  5. 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 of the Button: Link to URL/Email editor settings

To Add a Button that Links to Download a File

  1. Click the dropdown arrow and select Button: Download File.
  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. Click Add media to upload or select the file from the media library that you would like to link to.
Example of button: download file editor settings

User Experience Best Practices

  • Do not add buttons to the component header: If you are using the component header, do not use the primary and secondary buttons. Instead add any relevant links to the link list.
  • Keep Links Relevant and Grouped: Only include links that are related to each other or serve a common purpose. This helps users quickly find what they need without confusion.
  • Use Clear, Descriptive Link Text: Avoid vague labels like “Click Here.” Instead, use text that clearly describes the destination or action, such as “Western Regional Graduate Program” or “Download Enrollment Guide.”
  • Avoid Overloading the List: Keep the list concise. Too many links can overwhelm users and reduce usability. If you have many links, consider grouping them under headings or using a collapsible format.