Page anatomy

Page layout

The topic page uses the single column - navigation page layout.

1

Heading (topic title)

2

Header description

3

Tile heading

4

Tile description

5

Section heading

A direct, short title focused on the main topic the user will learn about.

  • Maximum character limit of 50.
  • Page title is the business topic.

A short paragraph that expands on what the topic is about and why it is important.

Rules:

  • The description text should always start with one of the following:
  • “Find out …”
  • “Learn how …”
  • “Understand …”
  • Include the top three keywords for the page.
  • Maximum character limit of 90.

A direct, short title focused on the main topic the user will learn about.

  • Maximum character limit of 50.
  • Page title is the business topic.

This is automatically populated using the level 2 short description:

  • Use one of these three intro phrases: “learn how to”, “understand” or “find out”.
  • Include the top three keywords for the page.
  • Maximum character limit of 90.

Can be used to break up pages into groups

  • Short name explaining groups

Guidelines for use

Purpose

A topic page is the level 2 page. It provides the user with enough information to navigation to pages (transaction, 101, resource or tutorial) pages under each business topic. The content is pulled from metadata from pages below to populate the content tiles.

It should always include:

  • The name of the business topic it is related to.
  • A long description explaining what the topic is about.

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.