Back to Atoms

Molecules

Next: Organisms

Sections & containers

Section headers

Buttons, links & navs

Flow buttons & links Button groups Pagination

Forms

Text & number input groups Select input groups File input groups

Tables

Help & hints

Alert messages Keys Empty states Large success messages

Analytics

KPIs

Progress indicators

Back

Previous Next

Section headers

Section headers can be used within page layouts for separating content and displaying actions for that content.

Any header from an h2 to an h5 can be used, and any combination of action buttons or fields can be used.

Action buttons and filtering/search fields can be omitted if not required.

Each header with an action button

Content header with h2 and secondary action

h2 example

Content header with h2 and secondary action

Copy HTML

Content header with h3 and secondary action

h3 example

Content header with h3 and secondary action

Copy HTML

Content header with h4 and secondary action

h4 example

Content header with h4 and secondary action

Copy HTML

Content header with h5 and secondary action

h5 example

Content header with h5 and secondary action

Copy HTML

With a checkbox and action

Content header with checkbox and action

h2 example

Show expired

Content header with checkbox and action

Copy HTML

With select box

Content header with a select

h2 example

Content header with a select

Copy HTML

With filter and search

Content header with filtering and search

h2 example

Content header with filtering and search

Copy HTML

Flow buttons & links

Flow buttons & links are groups of buttons and links where users can take different paths e.g. proceed to the next step or going back to a previous step

Two buttons

Primary action for proceeding is always on the right and secondary action for proceeding next to it on the left.

If there is a negative action in addition to other actions, it should sit on the far left away from the other actions.

Primary and secondary flow buttons

Copy HTML

Primary and secondary flow buttons with a hint

Hint message about these actions

Primary and secondary flow buttons with a hint

Copy HTML

Primary and secondary flow buttons with a negative action

Copy HTML

Primary and secondary flow buttons with checkbox

Checkbox

Primary and secondary flow buttons with checkbox

Copy HTML

Button and link

Use a link and a button when there is a primary action and the other option is to got back to before this section of the system was shown e.g. closing a modal.

If there is a negative action in addition to other actions, it should sit on the far left away from the other actions.

Button and link flow buttons

Back

Button and link flow buttons

Copy HTML

Button and link flow buttons with a hint

Back Hint message about these actions

Button and link flow buttons with a hint

Copy HTML

Button and link flow buttons with a negative action

Back

Button and link flow buttons with a negative action

Copy HTML

One button

One button flow

Copy HTML

One button flow with a hint

Hint message about these actions

One button flow with a hint

Copy HTML

One button flow with a negative action

Copy HTML

One button flow with checkbox

Checkbox

One button flow with checkbox

Copy HTML

Next and back

Next and back flow buttons

Copy HTML

Next and back flow buttons with a hint

Hint message about these actions

Next and back flow buttons with a hint

Copy HTML

Button groups

Button groups are used to visually group buttons into one set of related actions

Icon grouped buttons

Copy HTML

Icon grouped buttons with label

Form label

Icon grouped buttons with label

Copy HTML

Smaller icon grouped buttons

Copy HTML

Smaller icon grouped buttons with label

Form label

Smaller icon grouped buttons with label

Copy HTML

Path selection buttons

Only used when the user has a number of options to select from to determine the path they want to take

Path selection buttons

Pagination

Only use large data pagination where the standard pagination is absolutely not possible

Standard pagination

Showing 1-50 of [84]

Show

Standard pagination

Copy HTML

Large data pagination

Copy HTML

Text & number input groups

Text & number

The below can be used for text, number, phone, email, password, date and time inputs

Standard state

Field label

Standard state

Copy HTML

Input with tooltip

Field label

Input with tooltip

Tooltips can be used for field explanations that may not be needed each time a user completes this field, or that are too long to place as a hint below

Copy HTML

Input with hint

Field label

Important information relating to filling out this field

Input with hint

Hints can be used for short explanations may be needed each time a user completes this field. Hints should be no longer than a sentence.

Copy HTML

Input with help link

Field label Help link

Input with help link

Help links can be used where longer explanations are required to trigger an explanation popup.

An example of this is when a user may need to be directed to our support team if they can't find the options they are expecting after reading through an explanation of why this may be the case.

Copy HTML

Optional input

Field label (optional)

Optional input

Copy HTML

Errored input

Message that tells the user what to do to fix the error

Field label

Errored input

Error messages should tell users what they has gone wrong (if applicable) and what they need to do to fix it

Copy HTML

Input with add another option

Field label

Add another

Input with add another option

Add another option should be used when the user can type in and add as many fields as they like e.g. manager's email addresses

Note this should only be used when the user is typing in information, not selecting from a list. If selecting multiple options from a list, use either checkboxes or a multi select component.

Copy HTML

Input with n/a option

Field label

Checkbox

Input with n/a option

N/a options are included if the input field is mandatory but there are cases where it may not be applicable to type in information e.g. for an expiry date a user needs to be able to select 'No expiry'

Note the term 'n/a' can be changed out depending on context e.g. below and expiry date field it would read 'No expiry date'

Copy HTML

Input with preppended text

Field label

AUD $

Input with preppended text

Copy HTML

Input with appended text

Field label

days

Input with appended text

Copy HTML

Input with appended button

Field label

Input with appended button

Copy HTML

Number input options

Number inputs

Field label

Number inputs

Copy HTML

Number inline inputs

Field label

Number inline inputs

Copy HTML

Mobile number inputs

Mobile number

Mobile number inputs

Copy HTML

Mobile number inputs, errored

Enter a valid mobile number

Mobile number

Mobile number inputs, errored

Copy HTML

Price inputs

[Label]

Price inputs

Copy HTML

Price inputs, errored

Enter a valid number

[Label]

Price inputs, errored

Copy HTML

Temperature inputs

Copy HTML

Text areas

Textarea inputs

Field label

Textarea inputs

Copy HTML

Textarea with tooltip

Field label

Textarea with tooltip

Tooltips can be used for field explanations that may not be needed each time a user completes this field, or that are too long to place as a hint below

Copy HTML

Textarea with hint

Field label

Important information relating to filling out this field

Textarea with hint

Hints can be used for short explanations may be needed each time a user completes this field. Hints should be no longer than a sentence.

Copy HTML

Textarea with help link

Field label Help link

Textarea with help link

Help links can be used where longer explanations are required to trigger an explanation popup.

An example of this is when a user may need to be directed to our support team if they can't find the options they are expecting after reading through an explanation of why this may be the case.

Copy HTML

Textarea with limit

Field label

5 characters remaining

Textarea with limit

Note, the limit should be enforced.

Copy HTML

Textarea with limit reached

Field label

0 characters remaining

Textarea with limit reached

Note, the limit should be enforced.

Copy HTML

Optional textarea

Field label (optional)

Optional textarea

Copy HTML

Errored textarea

Message that tells the user what to do to fix the error

Field label

Errored textarea

Error messages should tell users what they has gone wrong (if applicable) and what they need to do to fix it

Copy HTML

Textarea with add another option

Field label

Add another

Textarea with add another option

Add another option should be used when the user can type in and add as many fields as they like e.g. manager's email addresses

Note this should only be used when the user is typing in information, not selecting from a list. If selecting multiple options from a list, use either checkboxes or a multi select component.

Copy HTML

Textarea with n/a option

Field label

Checkbox

Textarea with n/a option

Note the term 'Not applicable' can be changed out depending on context e.g. below and expiry date field it would read 'No expiry date'

Copy HTML

Input wizards

Input wizard

Field label

Input wizard

Copy HTML

Input wizard with tooltip

Field label

Input wizard with tooltip

Tooltips can be used for field explanations that may not be needed each time a user completes this field, or that are too long to place as a hint below

Copy HTML

Input wizard with hint

Field label

Important information relating to filling out this field

Input wizard with hint

Hints can be used for short explanations may be needed each time a user completes this field. Hints should be no longer than a sentence.

Copy HTML

Input wizard with help link

Field label Help link

Input wizard with help link

Help links can be used where longer explanations are required to trigger an explanation popup.

An example of this is when a user may need to be directed to our support team if they can't find the options they are expecting after reading through an explanation of why this may be the case.

Copy HTML

Optional input wizard

Field label (optional)

Optional input wizard

Copy HTML

Errored input wizard

Message that tells the user what to do to fix the error

Field label

Errored input wizard

Error messages should tell users what they has gone wrong (if applicable) and what they need to do to fix it

Copy HTML

Search boxes

Copy HTML

File input groups

Form file field

The below can be used for either single or multiple file uploads

Standard state

Field label

Drop files here or click to upload

Standard state

Copy HTML

Input with tooltip

Field label

Drop files here or click to upload

Input with tooltip

Tooltips can be used for field explanations that may not be needed each time a user completes this field, or that are too long to place as a hint below

Copy HTML

Input with hint

Field label

Drop files here or click to upload

Important information relating to filling out this field

Input with hint

Hints can be used for short explanations may be needed each time a user completes this field. Hints should be no longer than a sentence.

Copy HTML

Input with help link

Field label Help link

Drop files here or click to upload

Input with help link

Help links can be used where longer explanations are required to trigger an explanation popup.

An example of this is when a user may need to be directed to our support team if they can't find the options they are expecting after reading through an explanation of why this may be the case.

Copy HTML

Optional input

Field label (optional)

Drop files here or click to upload

Optional input

Copy HTML

Errored input

Upload a file

Field label

Drop files here or click to upload

Errored input

Error messages should tell users what they has gone wrong (if applicable) and what they need to do to fix it

Copy HTML

Tables

Row actions

Action button

Row header	Cell content

Action button

Copy HTML

Action & dropdown buttons

Row header	Cell content	Action Action Action Negative action Negative action

Action & dropdown buttons

Copy HTML

Icon button group actions

Column header	Column header	Lab.Lab.Lab.
Row header	Cell content

Icon button group actions

Copy HTML

Full tables

Basic table

Column one	Column two	Column three
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail

Basic table

Copy HTML

Striped tables

Striped table

Column one	Column two	Column three
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail

Striped table

Copy HTML

Tables grouped by first column

Grouped table

Column one	Column two	Column three
Row header	Detail	Detail
Row header	Detail	Detail

Row header	Detail	Detail

Grouped table

Copy HTML

Grouped table, sorted by another column


Row header	Detail	Detail
Row header	Detail	Detail

Row header	Detail	Detail

Grouped table, sorted by another column

Copy HTML

Table with totals

Column one	Column two	Column three
Row header	Detail	6
Row header	Detail	6
Total		12

Table with totals

Copy HTML

Table with row indicators

Row shading table

Column one	Column two	Column three
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail

Row shading table

Copy HTML

Spaced table rows

Column one	Column two	Column three
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail

Spaced table rows

Copy HTML

Selectable table rows and bulk actions

Selectable table rows with bulk actions

Select all


Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail

Selectable table rows with bulk actions

Copy HTML

Drag and drop table rows

Sortable table rows

Column one	Column two	Column three
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail

Sortable table rows

Copy HTML

Scrollable table

Scrollable table rows

Column one	Column two	Column three	Column four	Column five	Column six	Column seven	Column eight
Row header	Detail	Detail	Detail	Detail	Detail	Detail	Detail
Row header	Detail	Detail	Detail	Detail	Detail	Detail	Detail
Row header	Detail	Detail	Detail	Detail	Detail	Detail	Detail

Scrollable table rows

Copy HTML

Fixed header table

Column one	Column two	Column three
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail
Loading...

Fixed header table

Copy HTML

Table filtering

Table with filters

Column one	Column two	Column three
Row header	Detail	Detail
Row header	Detail	Detail

Table with filters

Copy HTML

Table with filters, no results

Column one	Column two	Column three
No ____

Table with filters, no results

Copy HTML

Expandable table rows

Column one	Column two	Column three
Row header	Detail	Detail
Collapsed content
Row header	Detail	Detail
Collapsed content

Expandable table rows

Copy HTML

Expandable table rows with panel content

Column one	Column two	Column three
Row header	Detail	Detail
Panel content Panel content
Row header	Detail	Detail
Panel content Panel content

Expandable table rows with panel content

Copy HTML

Expandable table rows with expand all

Expand all

Column one	Column two	Column three
Row header	Detail	Detail
Collapse content
Row header	Detail	Detail
Collapse content

Expandable table rows with expand all

Copy HTML

Table with form elements

If the table is not part of a larger form, the changes auto save and a success message shows to indicate this.
Change an input below to see this.

Form elements table rows

Column one	Column two	Column three
Row header		Loading...
Row header		Loading...

Form elements table rows

Copy HTML

Table with alphabet filter

Filter by ____ : All A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Column one	Column two	Column three
Row header	Detail	Detail
Row header	Detail	Detail
Row header	Detail	Detail

Table with alphabet filter

Copy HTML

Table with alphabet filter, no results

Filter by ____ : All A B C D E F G H I J K L M N O P Q R S T U V W X Y Z

Column one	Column two	Column three
No _____ starting with 'L'

Table with alphabet filter, no results

Copy HTML

All [X] on this page selected. Select all [X] in list

[X] selected

Deselect all

Alert messages

Success alerts

Success alerts are used to inform users when actions have been successfully completed while remaining on the same page

Success alerts do not appear in page, they slide down from the top of the page and disappear again after a while, see an example

Success alert

[Short message to inform the user which action has been successful]

Success alert

Copy HTML

Danger alerts

Danger alerts are used to inform users of problems

Danger alert

[Informative message that explains the problem to the user and the next action to take (if possible)]

Danger alert

Copy HTML

Danger alert with title line

[Title line][Informative message that explains the problem to the user and the next action to take (if possible)]

Danger alert with title line

Copy HTML

Danger alert - restricted width

[Informative message that explains the problem to the user and the next action to take (if possible)]

Danger alert - restricted width

Copy HTML

Warning alerts

Warning alerts are used to draw user's attention and inform them of possible issues or negative consequences

Warning alert

[Informative message that explains the issue/consequence to the user and the next action to take (if possible)]

Warning alert

Copy HTML

Warning alert with title line

[Title line][Informative message that explains the issue/consequence to the user and the next action to take (if possible)]

Warning alert with title line

Copy HTML

Warning alert - restricted width

[Informative message that explains the issue/consequence to the user and the next action to take (if possible)]

Warning alert - restricted width

Copy HTML

Info alerts

Info alerts are used offer the user helpful tips relating to the current task they are performing

Info alert

[Helpful message to help user perform their current task successfully]

Info alert

Copy HTML

Info alert with title line

[Title line][Helpful message to help user perform their current task successfully]

Info alert with title line

Copy HTML

Info alert - restricted width

[Helpful message to help user perform their current task successfully]

Info alert - restricted width

Copy HTML

Text and alerts columns

Text alert columns

Example text

[Helpful message to help user perform their current task successfully]

Text alert columns

Copy HTML

Keys

Inline key

Green
Red
Orange
Grey
Yellow
Blue

Inline key

Copy HTML

Stacked key

Green
Red
Orange
Grey
Yellow
Blue

Stacked key

Copy HTML

Empty states

Empty states should first confirm that there is no data to display so that the user knows the page is not broken. Then, where applicable, it should introduce the use of the page and explain how to add data to display.

Empty state for any page

[No forms created]

[Explain to the user how to get content to show on this page]

Empty state for any page

Copy HTML

Empty state with action button

[No forms created]

[Explain to the user how to get content to show on this page]

Empty state with action button

Copy HTML

Set a filter to view this page messages

Set filter first

Select an organisation or worksite

This page can't be accessed when viewing all worksites, select an organisation or worksite above to access

Set filter first

Copy HTML

No employees added message

Used when a page is accessed that requires employees to be added before accessing anything on that page

Empty state for any page

Your company hasn't got any employees

You'll need to add an employee and we'll need to approve them before you'll be able to [Action goes here]

Empty state for any page

Copy HTML

Large success messages

Large success messages are only used for successful actions where our standard slide-down success messages can't be used. For example, a user verifies their account by clicking a link in the email.

Molecules

Sections & containers

Buttons, links & navs

Forms

Tables

Help & hints

Analytics

Progress indicators

Section headers

Each header with an action button

h2 example

Content header with h2 and secondary action

Copy HTML

h3 example

Content header with h3 and secondary action

Copy HTML

h4 example

Content header with h4 and secondary action

Copy HTML

h5 example

Content header with h5 and secondary action

Copy HTML

Content header with small and secondary action

Copy HTML

With a checkbox and action

h2 example

Content header with checkbox and action

Copy HTML

With select box

h2 example

Content header with a select

Copy HTML

With filter and search

h2 example

Content header with filtering and search

Copy HTML

Flow buttons & links

Two buttons

Primary and secondary flow buttons

Copy HTML

Primary and secondary flow buttons with a hint

Copy HTML

Primary and secondary flow buttons with a negative action

Copy HTML

Primary and secondary flow buttons with checkbox

Copy HTML

Button and link

Button and link flow buttons

Copy HTML

Button and link flow buttons with a hint

Copy HTML

Button and link flow buttons with a negative action

Copy HTML

One button

One button flow

Copy HTML

One button flow with a hint

Copy HTML

One button flow with a negative action

Copy HTML

One button flow with checkbox

Copy HTML

Next and back

Next and back flow buttons

Copy HTML

Next and back flow buttons with a hint

Copy HTML

Button groups

Icon grouped buttons

Icon grouped buttons

Copy HTML

Icon grouped buttons with label

Copy HTML

Smaller icon grouped buttons

Copy HTML

Smaller icon grouped buttons with label

Copy HTML

Path selection buttons

Pagination

Standard pagination