Page Comparison

When To Use

A Stepper is used when a series of pages are needed to complete a process or connect a series of pages in a specific order. The primary case is in the context of a multi-step form.

Component Features

• Each step label should must be a minimum of 1 word and a maximum of 2 3 words long .

• When a step is selected the <title> element should be updated to reflect the current step number and step label “Step

  • e.g. Step: 1: {{Current Step Label}}

  ”. Recommended to prepend to the existing title

• The page or application context should be included

  • e.g. “Step 1: {{Current Step Label}} - {{Page/Application Context}}”

• On Desktop (medium and large screen)

  • When a step is selected the <h1> element

  should

  • must append the current step details

    • e.g.

  “

  • • {{Page/Application Context}} - Step 1: {{Current Step Label}}

  ”

Using Short-Term Rental Registration as an Example:

Every step must have a title with this format:

• Step 1: Property Address

The <title /> element in HTML must reflect this format.
so the page title will show “Step 1: Property Address”

• It’s not required to include the page or application context. In this case “Short-Term Rental Registration”

• • The current step must be identified

  • The selected step must be identified

  • The completed step must be identified

• On Mobile (medium and large screen)

  • When a step is selected the <h1> element must append the current step details

    • e.g. {{Page/Application Context}} - Step 1: {{Current Step Label}}

  • The current step of total steps is identified and the next step is identified