Link List
The Link List component allows you to create a simple list of related links. It's useful when you want a group of links to stand out on a page.
Uses
The Link List component is a flexible, accessible list of links that can provide your website visitors with additional navigation options or resources related to the current page or content.
Vertical lists are useful for links because they provide a clear, organized and easily scannable structure that allows your visitors to quickly identify and access the information they need.
Link list on desktop
Link list on mobile
Best practices
When to use it
- Use a Link List where you want to list 3 or more related links. For example, you could use a Link List to present links to 3 or more student resources, study abroad opportunities, etc.
- Only include links that offer significant value, as a long link list may overwhelm your visitors.
- If you'd like to link within the same page, use anchor navigation instead of a link list.
How to use it
- You'll find the Link List component in the AEM Sidekick, in the Concordia category.
- Add the component to a suitable place on your page.
- When you open the Link List for editing, you'll see tabs for Links, Settings and Advanced. You'll only need to work in the Links and Settings tabs.
Links
- Click Add item to add a link.
- Many people will be viewing your page on mobile, so keep the Link text clear and concise. It should accurately reflect the destination or purpose of the link. For example:
- Find health resources
- Browse wellness spaces and events
- Support our varsity athletes
- Link URL: If you're linking to a Concordia page, click the magnifying glass, navigate the tree and select the page. If you're linking to a non-Concordia page, add the URL.
- If you're linking to a non-Concordia page, check the box beside Open in new tab.
- Repeat steps 1-4 to add the remaining links to your list.
- Use the green arrows to order the list so it's easy to scan. Depending on the content, you may wish to order the links:
- alphabetically
- numerically
- chronologically
- or by leading with the link that's most important to your visitors
Settings
To ensure accessibility, each link list needs a proper heading.
Where you add the heading depends on how you're presenting the list.
If a WYSIWYG introduces the list, include the heading within the WYSIWYG.
In this example, the "Get to know our campuses" H3 is included in the WYSIWYG that introduces the link list:
If there isn't a WYSIWYG introducing the list, add a clear heading to the Heading field in the Link List Settings tab, then choose the appropriate Heading level.
In this example, there isn't a WYSIWYG introducing the list, so the H2 "Studies recruiting volunteers" is included in the link list settings tab:
Studies recruiting volunteers
List type: By default, this is set to Unordered. If you'd like the list to be numbered, change it to Ordered.
Columns: Often 1 column is enough. However, if you have 6 or more links, you may wish to use 2 columns. Three columns can run very tight so use your best judgment about this option.
Text style and colour: If you're editing an existing link list, leave the text style and colour as is. If you're adding a new link list, use the Default settings for text style and colour.
