Page anatomy

Page layout

The 101 page uses the two column - information page layout.

1

Heading (page title)

2

Header description

3

Left hand navigation

4

H2 Sub-headings

5

Image or video

6

Call out

7

Download call out

8

Call to action

9

Read next

A direct, short title that tells the user what the page is about.

  • The page title follows the format of “[topic] or “[topic] for business”
  • Maximum character limit of 50.

A short paragraph that expands on what the main action on the page is and why it is important. 

  • The supporting text should explain who the page is for, what the user will learn and the benefit of the page.
  • Maximum character limit of 350.

The in-page navigation that allows users to skip to a sub-section via an anchor link.

  • Built off sub-headings used for each sub-section on the page.

Short titles used to break up the content into sub-topics.

  • Maximum length of one line.
  • Don’t hyperlink the headings.
  • Avoid replicating the page title.

Optional supporting media to enhance the text content.

  • Use only one per page.
  • Use an image OR a video, but not both.
  • Only use when it is relevant and adds significant value.
  • Avoid using stock photos.

Used to highlight a supporting example, important information or a formula.

  • Only use one per sub-section.
  • Maximum word count of 200.

Used to highlight important related resources that are available to download.

  • Maximum of four resources per call out.
  • Each one is for a single resource.
  • The links in each one are used for different document formats of the same resource or two closely related resources. (e.g. Business plan template & guide)

Optional. Used to highlight an important internal or external site section/ tool.

  • Only use one CTA per page.
  • Maximum of three words in the text on the button.
  • Maximum of 50 characters in heading text.
  • Maximum of 100 characters in body text.

Used to direct the user to what they might find most helpful next.

  • Always use “Read next” for the heading.
  • All links should be internal links.
  • Maximum of three links.

Guidelines for use

Purpose

A 101 page is a single page that provides simple facts to help a user understand the basics of a business topic.

It should always include:

  • An introduction that explains what the page is and what the user will get out of it.
  • Co-ordinated sub-headings that follow a similar style to create an overview of what’s on the page.
  • Content that helps the user work out quickly if they need to understand what the page covers.
  • Content that helps the user understand why the topic is important.
  • Content that is sustainable to maintain.

It must NOT include:

  • Word-for-word legislation
  • Excess “what to do’s”
  • Steps or tips to complete specific processes
  • Content focused on completing a transaction-based action
  • More than three pieces of content the user is directed to at the bottom of the page

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.