Design

business.gov.au branding

No branding

Breakpoints:

Currently displaying the mobile design.

To see designs for other breakpoints please view this page on a larger screen.

Blue (default colour for information pages)

Consideration Sole trader Company

Teal (for tool pages)

Consideration Sole trader Company

Breakpoints:

Currently displaying the mobile design.

To see designs for other breakpoints please view this page on a larger screen.

Apply your brand specific colours, borders and icons to the base accordion shown below.

Consideration Sole trader Company

Layouts

Comparison accordions can be used on all page layouts except the Single column - navigation page layout and the two column - left filter layout.

Layout:

The content area is 8 grid-columns wide.

Comparison accordions span the full width of the content area.

The content area is 9 grid-columns wide.

Comparison accordions span the full width of the content area.

The content area is 11 grid-columns wide.

Comparison accordions span the full width of the content area.

The content area is 12 grid-columns wide.

Comparison accordions span the full width of the content area.

The content area is 9 grid-columns wide.

Feature image components span the full width of the content area.

The content area is 10 grid-columns wide.

Feature image components span the full width of the content area.

The content area is 12 grid-columns wide.

Feature image components span the full width of the content area.

The content area is 8 grid-columns wide.

Comparison accordions span the full width of the content area.

The content area is 9 grid-columns wide.

Comparison accordions span the full width of the content area.

The content area is 12 grid-columns wide.

Comparison accordions span the full width of the content area.

The content area is 8 grid-columns wide.

Comparison accordions span the full width of the content area.

The content area is 12 grid-columns wide.

Comparison accordions span the full width of the content area.

The content area is 8 grid-columns wide.

Comparison accordions span the full width of the content area.

The content area is 11 grid-columns wide.

Comparison accordions span the full width of the content area.

The content area is 12 grid-columns wide.

Comparison accordions span the full width of the content area.

Guidelines for use

Purpose:

The comparison accordion is a variation of the standard accordion pattern. It provides a high-level comparison between two items. User's can use 'read more' links to expand each comparison row and read further detail on the differences between the items.

When to use this component:

  • For highlighting the differences between two items, eg. the difference between two business structures.

Content rules:

  • H5, p and li tags can be used in the expandable rows.

Version history

15 January, 2024

  • Added an example of a row without 'learn more' information.

19 September, 2023

  • Added the comparison accordion to the style guide (as a new component).

Call to action toast notification

Pops up like cooked bread in a toaster.

Toasts can be left aligned or centered depending on the page context.

Toast notification

Pops up like cooked bread in a toaster.

Toasts can be left aligned or centered depending on the page context.

Changes to this contract are being autosaved.