#Overview
A link is used to navigate between pages.
- Link
- Link with icon before
- Link with icon after (external links only)
#When to use
- To navigate between pages
- To navigate to an external page
#Don’t use for
- For more complex content, use a Selector
#Anatomy
#Color
- Galaxus
- Digitec
#Spacing
#Best practices
#The icon should communicate context
Do
A link’s icon should represent what a user will get when they click or tap on the link. When the link stands alone, the icon increases the visual impact without relying on a call-to-action button.
Don't
A link’s icon should not be unrelated to what the user will get when they click or tap on the link.
#External links open in a new tab
Do
Links should open in a new tab when navigating to an external page.
Don't
Opening external links in a new window removes control from the user.
#Placement
Links are often placed either within or immediately after a sentence.
Links can be placed immediately after a heading, such as in the Order Details page.
We also use links to navigate to product types or to show further content, such as in a carousel. The “Recently viewed products” carousel above the footer has two links next to each other.
#States
#Default link
The following states are the same for a link with icon.
Galaxus
Digitec
- Normal
- Hover
- Focus
- Focus-visible
- Active
- Disabled
#Main navigation link
Galaxus
Digitec
- Normal
- Hover
- Focus
- Focus-visible
- Active
#Footer link
Galaxus
Digitec
- Normal
- Hover
- Focus
- Focus-visible
- Active
#Minimum target size
We set minimum target sizes to comply with WCAG Target Size (Level AA):
- On touch devices, links have an invisible 40 x 40px touch target.
- For pointer devices (such as a mouse), links have an invisible 24 x 24px target. It is especially important for a list of links to be spaced appropriately to avoid overlapping touch targets.
Targets which are contained within one or more sentences (inline targets) are excluded from the target size requirements.
- Touch target
- Pointer (mouse) target