Components: links
A wee design system's library
Links #
A link is a navigational element. It should be brief and descriptive of the intended destination.
Guidelines
- Use text links in favour of buttons for navigation purposes. If it takes you to a new page or section of a page, it should be an anchor element
<a>. - Provide text rather than images, so the content reminds readable. The only exception is the use of logos, as in the case of social media.
- Keep the content below five words to prevent text wrapping.
- Use meaningful text that gives users an idea of where it's taking them. Avoid the use of vague sentences like Click here.
- Set a contrast between body text and background colour that complies with standards. Anyone should be able to read it.
- Always underline active links. Reinforce them in the hover state with a cursor pointer and hiding the underlining. The only exception is the Skip to content button.
- Set the font size in relative units to keep it proportional to the reading device.
- Preserve the focus state by default. It allows users to distinguish the content they are currently selecting.
Code snippets
Links within a paragraph
Their styling is simple, underlined by default. Plus, a slight background colour change enforces the interaction.
Since these links are part of a paragraph, they should only appear over a plain background to remain legible.
Here are a few examples of proper usage:
This link is an example.
This link is an example.
This link is an example.
These are its code snippets:
HTML
<p><a href="#0">This link</a> is an example.</p>
CSS
a:link, a:visited {
background-color: #fcdad4;
border-radius: 3px;
color: #2f2f2f;
display: inline-block;
font: normal 1rem/1.6 'Georgia', Times, serif;
padding: 0 .25rem;
transition: all .4s ease-in;
}
a:hover, a:visited:hover, a:focus {
background-color: #fba798;
text-decoration: none;
}
Links as a call-to-action
These statements need an instant response from the user, and they usually appear at the end of a section. Their sentences end without a period.
Since these links are detached phrases, they perform well over any contrasting background.
Here are a few examples of proper usage:
These are its code snippets:
HTML
<p><a class="cta" href="#0">Another link as example</a></p>
CSS
a:link, a:visited {
background-color: #fcdad4;
border-radius: 3px;
color: #2f2f2f;
display: inline-block;
font: 700 1.25rem/1.6 'Raleway', Helvetica, sans-serif;
margin: 1.44rem 0 1.2rem;
padding: .25rem .5rem;
transition: all .4s ease-in;
}
a:hover, a:visited:hover, a:focus {
background-color: #fba798;
text-decoration: none;
}
Skip to content link
This link allows screen reader users to go straight to the main content. It's a hidden element by default, but it appears by pressing the tab key right after entering the page.
Here are a few examples of proper usage:
These are its code snippets:
HTML
<a href="#main-content" class="skip">Skip to content</a>
CSS
a.skip {
left: -999px;
overflow: hidden;
position: absolute;
top: 1rem;
z-index: -999;
}
a.skip:focus, a.skip:active {
background-color: #f96c53;
border-radius: 3px;
color: #2f2f2f;
display: block;
font: 700 .75rem/1.2 'Raleway', Helvetica, sans-serif;
left: 0;
overflow: auto;
padding: .5rem;
top: 0;
z-index: 999;
}
Sources of inspiration
- A Complete Guide to Links and Buttons—CSS-Tricks
- Inclusive Design Patterns (book)—Heydon Pickering
- Link—Carbon Design System
- Link—Shopify's design system
- Reinventing the Hyperlink—Heydon Pickering