Link Group 3up

A collection of links with a medium level of emphasis on the page. They form a single list that spreads evenly across either two or three columns (see Link Group – 2up),  so that the items flow to balance themselves when you add more.

Note: This pattern replaces the former “Fancy Link Group” pattern. For more on the available hierarchy of link styles in the WDS, see Buttons and Links.

Use Cases:

  • The auto-balancing behavior between columns makes this a good component for displaying items that all have an equal level of hierarchy, like a list of links to similar programs, names, events, forms, or publications.

Guidelines:

  • Use clear descriptive link labels so users can successfully choose their next move.

Avoid:

  • Avoid this component if the link text isn’t clear and self-evident, or if a user would need more context to understand the difference between the items (like acronyms or internal “branded” names that a user might not know). If someone would need more information to make the right choice, use a component that supports more space for explanation.
  • Don’t use this component if the items in your list are too long, or if there’s a lot of variance between lengths (e.g., if some of your links have 12 characters but others have 12 words).
  • Do not use this component for anchor links or as in-page navigation (links that jump to content further down on the same page). Using it consistently to link to separate pages (whether internal to the UT websites or external) will help protect user expectations around what happens when they click on this pattern.

Accessiblity:

  • Avoid ambiguous link text like “learn more,” “click here,” or “read more.” Users should be able to tell what the destination pages will show them by reading the link text alone.
  • Do not use “bare” URLs for the link text; screen reading software will read the whole thing aloud, and it’s harder for users to read than words that describe where the link is pointing them.

Accessibility guidelines for links


Component Viewer

Preview various component colors, widths, and alignments.