Foundations
The global rules and elements which govern the appearance, structure and behaviour of components.
CTAs and links
Buttons
Buttons guide users to take action on content. They begin with verbs to clearly describe the meaning of the action. Our design system includes 3 button styles.
This button style gives prominence to featured content and important user actions.
Recommendations
Labels for the primary button should be short and specific, communicating the prominent action a user could or should take.
Text button
Text buttons are used on their own, such as on cards, to help users navigate to content within the site or to external sites. They are a less prominent way to indicate multiple and repeated calls to action so as not to clutter the user interface.
Elements
The text button uses the action magenta colour from the primary colour palette. In most cases, the text button includes the arrow icon in all states. In the read more component, the arrow appears on hover and click.
The text button uses a small arrow when linking internally within the site. When linked to an external webpage, the arrow is replaced with an external link icon.
Text buttons are white when used on shaded background entity cards.
Text buttons are typically left aligned within cards and “read more” containers. They are typically right aligned within sections of content, such as the “Find all” text button under the featured card container.
| Primary | External | Secondary | |
|---|---|---|---|
| Default | Link | Link | Link |
| Hover | Link | Link | Link |
| Pressed | Link | Link | Link |
| Disabled | Link | Link | Link |
Link
Links are used in body copy and help users to move from one page to another. Buttons perform actions, whereas links help users to navigate through content on the site.
Elements
In-text links use the action magenta colour from the primary colour palette.