Helsinki Design System
Helsinki Design System
Getting started
Tutorials
Guidelines
Visual assets
Design tokens
Components
OverviewAccordionButtonCardCheckboxDate inputDialogDropdownFieldsetFile inputFooterIconKorosLinkPrinciplesAccessibilityUsage and variationsDemos & APILinkboxLoading spinnerLogoNavigationNotificationNumber inputPassword inputPhone inputRadio buttonSearch inputSelection groupSide navigationStatus labelTabsTagText fieldsTime inputToggle buttonTooltip
Patterns
About
Contributing
Resources

Link

Links are used as navigational elements and can be used on their own or in inline with text. They provide a lightweight option for navigation.

Principles

  • Too many links will clutter a page and make it difficult for users to identify their next steps. This is especially true for inline links, which should be used sparingly.
  • Use links when you want users to:
    • Navigate to a different page
    • Navigate to an entirely different site
    • Jump to an element on the same page
    • Link to emails or phone numbers
  • HDS Link supports a link with an external icon. Use the external prop when you wish to navigate to an entirely different site.
  • HDS Link supports a link that opens in a new tab. Use the openInNewTab prop when you wish to open the link in a new tab.

Accessibility

The HDS link component is primarily a native HTML hyperlink navigational element. The Enter key activates the link and causes the user agent to move focus to the link destination.

  • Remember to tell users if the link is going to open an entirely new site. In HDS React Link this feature is provided through external links (prop external). There is a default aria-label for screen readers. This can be overwritten by using the openInExternalDomainAriaLabel prop. In HDS Core, set a proper aria-label to the anchor tag as shown in the examples below.

  • Remember to tell users if the link is going to open in a new tab. In HDS React Link this feature is provided through prop openInNewTab. There is a default aria-label for screen readers. This can be overwritten by using the openInNewTabAriaLabel prop. In HDS Core, set a proper aria-label to the anchor tag as shown in the examples below.

  • Some assistive technologies provide a list of all links on the page to its user. If the text of the links does not clearly give the purpose, or if multiple links with the same name point to different targets (e.g., “read more”), users are forced to locate the link on the page and search surrounding information for context.

Make sure that:

  • Link text is the visible label for the native HTML link and is used to provide the purpose of the link which is clear and easy to understand for all users.
  • The alt attribute for the img element is used to describe the purpose of a graphical link with an image inside the link.
  • The title attribute can be used to supplement the link text with any additional useful description.
  • The purpose of each link can be determined from the link text alone or from the link text together with its programmatically determined link context.
  • Icons should always be the same colour as the link text

Usage and variations

Inline

These links are the default link variant. Inline links are used within a sentence or paragraph and are underlined.

The underlining helps differentiate them from the text they are placed next to and makes it clear users can interact with them. Inline links should not be used on their own.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo HDS Githubconsequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Core:

<p style={{ fontSize: '14px', lineHeight: '1.5' }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco
<a href="https://github.com/City-of-Helsinki/helsinki-design-system" class="hds-link hds-link--small" aria-label="HDS Github. Opens in external domain">
HDS Github<i class="hds-icon icon hds-icon--link-external hds-icon--size-xs vertical-align-small-or-medium-icon" aria-hidden="true"></i></a>
laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.
Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>

React:

<p style={{ fontSize: '14px' }}>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
<Link href="https://github.com/City-of-Helsinki/helsinki-design-system" external openInExternalDomainAriaLabel="Opens a different website">
HDS Github
</Link>
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
laborum.
</p>

Standalone

Standalone links are used on their own or directly after the content, and they are underlined. If you wish not to have an underline, consider using a button instead.

Standalone links should not be used within sentences or paragraphs.

Core:

<a href="https://hds.hel.fi/" class="hds-link hds-link--large" style="display:block;">Standalone link</a>

React:

<Link href="https://hds.hel.fi/" size="L" style={{ display: 'block', width: 'fit-content' }}>
Link to HDS
</Link>

Demos & API

Core

Link in hds-core

React

Link in hds-react

Link API