Components

• Introduction
• Link
• List
• Description-list
• Table
• Button
• Button-group
• Message
• Input
• Select
• Textarea
• Checkbox
• Radio-group
• Segmented-control
• Content-container
• Form-container
• Media
• Summary
• Skip-link
• Header
• Footer
• Icons

Link

The link component represents a clickable link that has been styled to look like a button.

Overall usage

• Used to send users to a new URL.
• Must not be used to trigger form submission or events. In these cases, the button component must be used.

Accessibility

• The content of the link should be meaningful. The purpose of the link can be determined from the link text alone.
• The static, focus, hover and active states of the button should be defined
• There must be a clearly visible focus state, and the focus method should be consistent across all focusable elements.

---

.link

Used to display a link with the same dimensions as a button.

<a href="#" class="link">link</a>

---

.link--primary

Used to display a link in the style of a primary button.

<a href="#" class="link--primary">link--primary</a>

---

.link--secondary

Used to display a link in the style of a secondary button.

<a href="#" class="link--secondary">link--secondary</a>