Page anatomy

Page layout

The tiled page with fitlers uses the two column - filter page layout.

1

Heading (tool title)

2

Header description

3

Results showing number

4

Filters

5

Result tiles

6

Pagination

A direct, short title focused on how the tool can help the user.

  • Maximum character limit of 50.
  • Title is the name of the tool.

A short paragraph that expands on what information the tool provides and why it is important.

  • Include the top three keywords for the page.
  • Maximum character limit of 90.

The results showing number highlights the number of information tiles available. When the page loads the showing number is set to the total number of items available. When the user interacts with the filters to refine the set of tiles the showing number changes accordingly.

The showing number text should describe the type of information being displayed:

  • Showing XX services
  • Showing XX events

The filters allow users to refine the current set of information tiles using a series of checkboxes, dropdown selects and / or text input fields.

Filter configurations vary from tool to tool.

Result tiles are used to link to business.gov au pages.

Tile designs vary between tools but generally have a title that relates to the linked page title and a short description.

The pagination links provide a way to navigate through multiple pages of result tiles.

Guidelines for use

Purpose

Tiled pages with filters provide users with a series of links to related information such as a set of services or events. Filters can be used to refine the number of items included helping users to find informtion that is relevant to them.

Examples of this pattern are the business.gov.au events finder and adviser finder tools.

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.