Linkbox

Usage

Example

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.

Should I use a Linkbox or a Card?

• 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)

Variations

Empty

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

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.

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.

With image

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

Linkbox size variants

HDS Linkbox includes three (3) size variants; small, default, and large (LinkboxSize.Small, LinkboxSize.Medium and LinkboxSize.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.