Link list
Use a link list when people need a compact list of related links with an optional heading, not a full site menu.
Live demo
A link list groups related destinations in one place: quick links, footer columns, landing-page shortcuts, or supporting navigation beside long-form content. Authors choose link text, order, and how prominent the block should feel; designers set typography, columns, and colour so the list matches the page background and hierarchy. The pattern is not a replacement for primary site navigation; it supports local wayfinding and curated collections.
Behaviour
Each item is a standard hyperlink. External destinations can open in a new tab and show an external icon so people know they are leaving the site. Non-default visual styles may add a chevron to reinforce the affordance. Lists can run in one, two, or three columns depending on density and layout; long lists should stay scannable (see Content guidelines).
Anatomy
- Optional heading to name the group (level is set in authoring; see Code).
- List of links, with optional bullets or numbers when the list type matches the content.
- Link text (and optional accessible name when the visible label is not enough).
- Indicator when a link opens in a new tab (external icon).
Content guidelines
- Write specific link text that matches the destination; avoid “click here” or duplicate page titles that do not distinguish paths.
- Sort in a predictable way: alphabetical, chronological, by task, or by importance, and keep the same convention within one list.
- Keep labels short; if a label must be long, consider splitting into more than one column or tightening the wording.
- Use a heading when several lists appear on the same page so each group has a clear purpose.
When to use
- Curated groups of links tied to the current page or section (programs, resources, related offices).
- Landing pages that need a navigation-style band without duplicating the global header.
- Footer or mega menu columns where the pattern is already established.
When not to use
- Primary site-wide navigation; use Navigation and information architecture instead.
- Tree-based section menus; consider Secondary navigation when the list must mirror the hierarchy.
- A single isolated link with no list semantics; use Link or inline rich text.
Best practices
Do
- Keep styling consistent across lists of similar importance on one page.
- Test on mobile so multi-column lists still read in a sensible order.
Don't
- Overload one list with dozens of links; split by topic or page.
- Use a link list to replace governance of navigation titles and IA; fix structure at the source.
Related
| Resource | |
|---|---|
| Link | Single link behaviour, paths, and external handling. |
| Navigation | Primary site navigation and shared header patterns. |
| Secondary navigation | Hierarchy-based section menus versus arbitrary lists. |
Typography variants range from default (in long-form content) to stronger styles for landing-page bands. Column count and text colour are chosen to match background contrast: default hyperlink blue on light surfaces, black or white treatments on tinted or filled regions. Interaction states follow CDS link affordances; focus visibility is shown for light and dark contexts in the figures below.
Styles
| Style | CSS modifier | Description |
|---|---|---|
| Default | .c-link-list--default |
Intended for use within long-form content. |
| Gill Sans Book | .c-link-list--book |
Groups related links together. |
| Gill Sans Book with underline | .c-link-list--underline |
Used on landing pages as navigation menu. |
| Gill Sans Bold Condensed | .c-link-list--bold |
Groups related links and adds more emphasis. |
| Gill Sans Bold Condensed large | .c-link-list--large |
Used on landing pages as prominent navigation menu. |
Columns
| Layout | CSS modifier | Description |
|---|---|---|
| One column | .c-link-list--1-column | One column for use within long-form content. |
| Two columns | .c-link-list--2-column | Two columns to group related links. |
| Three columns | .c-link-list--3-column | Three columns for landing pages. |
Colour
| Colour | CSS modifier | Description |
|---|---|---|
| Default | .c-link-list--colour-default | Hyperlink blue, white or light grey background. |
| Black | .c-link-list--colour-black | Black on tinted backgrounds. |
| White | .c-link-list--colour-white | White on filled backgrounds. |
Interactions
Patterns
Keyboard navigation
| State | Preview |
|---|---|
| Focus (light) | !Focus light |
| Focus (dark) | !Focus dark |
CRXDE Lite query
Use this query in CRXDE Lite to find instances of this component.
/jcr:root/content//*[@sling:resourceType = 'concordia/components/link-list/link-list.jsp']Technical behaviour
link-list.jsp reads a multivalue links property stored as JSON objects per item (linkText, linkPath, linkTarget, itemClass, optional ariaLabel). Internal paths under /content/ gain .html when missing (excluding DAM). The list element uses role="menu" with role="menuitem" on anchors and role="presentation" on list items; optional liAttributes can support patterns such as tabs. External targets append a decorated external-link icon; other non-default text styles may append a chevron icon.
Anatomy (implementation)
- Container:
div.c-link-list__containerwith optionaldivCssClass. - Heading: Optional
headerrendered withhType(h2,h3, orh4) andc-link-list__heading, or raw HTML whenhTypeis empty. - List:
<ul>or<ol>perlistType, merged classes for layout and colour,role="menu". - Items: Each link from JSON;
itemClassand first-itemactivewhenliAttributescontainstab.
Authoring
Authors maintain the links multivalue field and related dialog options: heading, heading level, list type, style and colour classes, column class, optional per-item accessible name, new tab behaviour, and custom li attributes for advanced patterns.
Instances in the codebase
| Location | Notes |
|---|---|
apps/concordia/components/link-list/link-list.jsp | Primary implementation. |
| Item | Location |
|---|---|
| Component | apps/concordia/components/link-list/link-list.jsp |