-
Accordion
Accordions expand and collapse sections of content.
-
Banner
Banners are used to introduce a page, their content should reflect the goals, content and purpose of the page they're on.
-
Block quote
A blockquote is used to display quoted or cited text, typically styled to distinguish it from regular content.
-
Breadcrumbs
Breadcrumbs are a navigational aid that display a user's location on a website as a row of links, usually located at the top of the page.
-
Button
Buttons are an interactive element that initiates an action, such as submitting a form or opening a page.
-
Callout
A callout is a styled container used to draw attention to information or content within a page.
-
Call to action (CTA)
Call to action (CTA) link is a text-based link that is designed to prompt users to take a specific action.
-
Card
The card component is used to provide a brief summary of content or a task, often with a link to more detail.
-
Checkbox
A checkbox is form component that lets users select one or more options from a list.
-
Direction link
Direction links are accompanied by arrows to help users move quickly to other parts of the page or through a process.
-
File upload
Allow users to select one or more files to upload to a specific location.
-
Footer
A footer appears at the bottom of a page and typically contains legal information, supplementary content, or helpful links for users.
-
Forms
Includes guidance on labels, hint text, required and optional fields, validation, error messages, and fieldsets.
-
Global alert
A global alert displays across the top of the entire site to convey important information to the users.
-
Header
A header appears across the top of all pages on a website or application and contains the site's name and main navigation.
-
Navigation (horizontal)
A horizontal container for global navigation that can display links to first and second level pages.
-
Navigation (vertical)
A vertical container for global navigation that can display links to first and second level pages.
-
Horizontal rule
A horizontal rule is a visual element used to separate or organise content.
-
In-page alert
An in-page alert is used to inform users about essential updates or modifications on a page - capturing their attention without disrupting their ongoing task
-
In-page navigation
In-page nav is a vertical list of links that helps users scan the contents of a page and navigate to different sections of the page.
-
Link column
A link column is used for grouping a collection of related links.
-
Loading spinner
A loading spinner is a small looped animation used to indicate that content is being loaded or processed in the background.
-
Pagination
Pagination is used to divide large amounts of content into a series of pages.
-
Promotional panel
A promotional panel is used to highlight specific content or messages. Acting as a visual break on a page, it draws attention with visual emphasis and often includes a call to action, such as a link or button.
-
Radio
A radio is a form component that allows a user to select a single option from a list of predefined options.
-
Select
A select is a form component that lets users choose one option from a predefined dropdown list.
-
Side navigation
The side navigation is a vertical list of links placed alongside the page content to help users quickly move between related pages in the same topic or section.
-
Table
A table provides a structure for complex and detailed information.
-
Tabs
Tabs organise content into multiple panels, showing one at a time, and let users switch between them without leaving the page.
-
Tag
Tags classify content using keywords or labels.
-
Text area
A text area is form component that accepts multi-line text.
-
Text input
A text input is a form component that accepts a single line of text.