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.

Breakpoints:

Currently displaying the mobile design.

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

Layouts

Modal dialogs can be used on all page layouts.

Layout: All layouts

All breakpoints

Modals are horizontally centered on the screen. At breakpoints above 768px wide modals sit 80px from the top of the screen. Below 768px wide modals sit 16px from the top.

Single column modals have a maximum width of 640px.

Two column modals have a maximum width of 900px.

Guidelines for use

Purpose:

Used to attract the users attention to important information during a process.

The modal dialog appears on top of the main content which is disabled until the modal is closed.

When to use this component:

Modal dialogs can disrupt to the user experience and should not be used often. Only use them to aid the user in completing a workflow or process.

Use modals to:

  • Display important warnings or correct critical errors.
  • Allow the user to enter information for continuing a current process.
  • Break up a complex workflow into simpler steps.

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.