Component brief: Links

Text links navigate users to a different page or section of a page. 

Background

Github

Design system documentation

Community feedback 🔒

This component was created during the USWDS Accelerator Emergency Response effort in Q1 2021.

We heard about the need to...

• Provide better guidance on how to link to informational sources (attribution)

• Rethink our guidance on using the external link icon

We were inspired by...

• Gov.uk's decision to remove the external link icon

What we built

Design

• We updated the link text in the examples to follow our own guidance of "unique and meaningful language" --- previously, the example link text was the word "this" over and over again

• We added guidance to address different types of external links: informational sources, email addresses, phone numbers, files, etc.

Engineering

• No new engineering involved

What we decided against

• 360º links guidance. We focused on the scope of the ask: how to handle informational sources and external links. We began to draft additional guidance 🔒, such as when to use a button versus a link, pairing links with icons, and styling visited links. However, those additions came too late to properly collect feedback, so we left them out since it wasn't part of the original scope.

If we had more time we'd ...

• Provide 360º links guidance including when to use a button versus a link, how to style links with icons, etc.

• Separate links from the typography component and make it its own standalone component