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

Linkbox

DraftAccessible

Linkboxes are used to combine multiple elements into a single interactable element. While they are visually similar to HDS Cards, Linkboxes are always a single clickable link and they cannot contain other interactable elements.

Principles

  • Linkbox must always be interactable in its entirety. This means that Linkboxes must not include multiple interactable elements (e.g. buttons or multiple links). The Linkbox element only gets focused once.
  • To emphasize its interactability, the Linkbox includes a mandatory icon. Depending on the link type the icon is either an arrow or an external link icon. Do not remove or modify these icons.
    • To read more about HDS recommendations about links, see HDS Link documentation.
  • Linkboxes work very well for listing heterogenous content such as news items, blog posts, or upcoming events.
  • Use Linkboxes sparingly. While they can drastically improve service's understandability and readability, overusing them may result in confusing and complex user interfaces.
  • Use the Linkbox component when
    • the whole element needs to be interactable
    • the element does not include multiple interactable elements
  • Use the Card component when
    • the whole Card does not need to be interactable
    • the Card contains multiple interactable elements (e.g. buttons or links)

Accessibility

  • Linkbox must have the link as its last element (in the DOM tree). This way assistive technologies will eventually find the Linkbox link.
  • The colour contrast between the Linkbox and its background must comply with WCAG AA Level contrast ratios. If needed, you may use a Linkbox border to increase the contrast to its background.

Usage & variations

Empty

The default empty Linkbox variant can be used to build Linkboxes with custom content.

React code example:

<Linkbox linkboxAriaLabel="Linkbox: Helsinki Design System" linkAriaLabel="HDS" href="https://hds.hel.fi">
<div style={{ height: '106px' }} />
</Linkbox>
<Linkbox linkboxAriaLabel="Linkbox: Helsinki Design System" linkAriaLabel="HDS" href="https://hds.hel.fi" withBorder>
<div style={{ height: '106px' }} />
</Linkbox>
<Linkbox linkboxAriaLabel="Linkbox: Helsinki Design System" linkAriaLabel="HDS" href="https://hds.hel.fi" noBackground>
<div style={{ height: '106px' }} />
</Linkbox>

With heading and body text

Additionally, HDS offers styling for basic heading and body text inside the Linkbox component. These can be used instead of custom elements.

React code example:

<Linkbox
linkboxAriaLabel="Linkbox: Helsinki Design System"
linkAriaLabel="HDS"
href="https://hds.hel.fi"
heading="Linkbox title"
text="Linkbox text"
/>
<Linkbox
linkboxAriaLabel="Linkbox: Helsinki Design System"
linkAriaLabel="HDS"
href="https://hds.hel.fi"
heading="Linkbox title"
text="Linkbox text"
withBorder
/>
<Linkbox
linkboxAriaLabel="Linkbox: Helsinki Design System"
linkAriaLabel="HDS"
href="https://hds.hel.fi"
heading="Linkbox title"
text="Linkbox text"
noBackground
/>

Internal and external Linkboxes

Depending on the link type the icon is either an arrow or an external link icon. Use the property external to alter the icon depending on the link type. You can also add openInNewTab property to make the link open in a new browser tab.

React code example:

<Linkbox
linkboxAriaLabel="Linkbox: Helsinki Design System"
linkAriaLabel="HDS"
href="https://hds.hel.fi"
heading="Internal link"
text="This link points to a page belonging to the same website as the current page."
withBorder
/>
<Linkbox
linkboxAriaLabel="Linkbox: Helsinki Design System"
linkAriaLabel="HDS"
href="https://hds.hel.fi"
heading="External link"
text="This link points to another page."
external
withBorder
/>
<Linkbox
linkboxAriaLabel="Linkbox: Helsinki Design System"
linkAriaLabel="HDS"
external
href="https://hds.hel.fi"
heading="External link"
openInNewTab
text="This link points to another page and opens in a new tab."
withBorder
/>

With image

HDS offers styling for a Linkbox with an image as its content.

React code example:

<Linkbox
linkboxAriaLabel="Linkbox: Helsinki Design System"
linkAriaLabel="HDS"
href="https://hds.hel.fi"
heading="Linkbox title"
text="Linkbox text"
imgProps={{ src: [img path], width: 384, height: 245 }}
/>

HDS Linkbox includes three (3) size variants; small, default, and large. You can use different sizes depending on the screen size or use case. Size variants differ in (default) heading size and inner spacing. Use the size property to alter the size.

React code example:

<Linkbox
linkboxAriaLabel="Linkbox: Helsinki Design System"
linkAriaLabel="HDS"
href="https://hds.hel.fi"
heading="Small Linkbox"
text="Linkbox text"
imgProps={{ src: [img path], width: 284, height: 181 }}
size="small"
withBorder
/>
<Linkbox
linkboxAriaLabel="Linkbox: Helsinki Design System"
linkAriaLabel="HDS"
href="https://hds.hel.fi"
heading="Default Linkbox"
text="Linkbox text"
imgProps={{ src: [img path], width: 384, height: 245 }}
withBorder
/>
<Linkbox
linkboxAriaLabel="Linkbox: Helsinki Design System"
linkAriaLabel="HDS"
href="https://hds.hel.fi"
heading="Large Linkbox"
text="Linkbox text"
imgProps={{ src: [img path], width: 567, height: 363 }}
withBorder
size="large"
/>

Demos & API

Core

Not included in hds-core!

React

Linkboxes in hds-react

Linkboxes API