Overview
Overview
A link column is used for grouping a collection of related links.
Our link columns component is a simple list of vertical links that can be used to group related links. It's useful when you want a group of links to stand out on a page as this style of list has more visual emphasis than a traditional link list.
The link columns component consists of a single continuous list of links that can be styled across 1-3 columns.
<!--
1 col: <ul class="qld__link-columns">
2 col: <ul class="qld__link-columns qld__link-columns--2-col">
3 col: <ul class="qld__link-columns qld__link-columns--3-col">
-->
<h2>Related links</h2>
<ul aria-label="Related links" class="qld__link-columns qld__link-columns--2-col">
<li><a href="#">Contact us</a></li>
<li><a href="#">About us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">FAQ</a></li>
<li><a href="#">Terms and conditions</a></li>
<li><a href="#">Privacy policy</a></li>
<li><a href="#">Blog</a></li>
<li><a href="#">Careers</a></li>
<li><a href="#">Press</a></li>
<li><a href="#">Resources</a></li>
<li><a href="#">Partners</a></li>
<li role="listitem"><a href="#">Support</a></li>
<li><a href="#">Events</a></li>
<li><a href="#">Community</a></li>
<li><a href="#">Sitemap</a></li>
<li class="qld__link-columns__all-link"><a href="#" class="qld__cta-link qld__cta-link--view-all">View all</a></li>
</ul>
Usage guidelines
The link columns component is a flexible, accessible list of links that can be used to provide users with additional navigation options or resources related to the current page or content.
Vertical lists are useful for links because they provide a clear, organised, and easily scannable structure for users when navigating a website or application. They can help users quickly identify and access the information they need, resulting in a more user-friendly experience.
The Nielsen Norman Group, a leading user experience research firm, has published an article highlighting the benefits of vertical lists for links, especially for navigation menus. The article explains how vertical lists improve usability by leveraging the natural scanning behaviour of users, making it easier to locate and select the desired link.
When to use
- On landing pages that don't include side navigation
- On landing pages where you want to group a list of related navigation links with more emphasis than traditional link lists
When not to use
- For lists of navigation that aren't related
- In transactional services or a forms
- To link to content on the same page, consider in-page navigation
- On pages that have side-navigation that duplicates links within the list
How to use
Do
- Lists should be sorted in logical ways that make content easy to scan, such as alphabetical, numerical, chronological, or by user preference
- Lists should present icons, text, and actions in a consistent format
- Use descriptive and concise link text that accurately reflects the destination or purpose of the link
- Use a clear heading (e.g., "Related links") to label the list of links and provide context
Don't
- Have link columns that span larger than about 46rem or approximately 60 characters, on large screens consider splitting the links into multiple columns as this will improve a user's ability to scan the content
- Don't include an excessive number of links, as this can be overwhelming for users and make it difficult to find the desired information
- Don't use this component for the primary site navigation or to replace a site-wide menu