Get startedPatternsComponentsStylesContentSupport
Select your development framework to see all code in your development languages. You can change this in the top right of the screen.
AllSimple formPagesBasic page layoutStart pageTask list pageQuestion pagesReview pageResults page

Start page

This is the starting point for a citizen to begin your form from within your service or from Alberta.ca.

Code examples

Start page from Alberta.ca

View in Figma

Name of service

A short overview of the service. This is a couple sentences that helps the user understand what the service is.

Use this service to apply for [service]. You can use this service to:

  • see of you or a family member is eligible for [service]
  • create and submit an application for [service]
  • continue an application for [service] that you already started

Before you begin

The application form should take about 20 minutes to complete.

In order to complete the application you will need:

  • government issued ID for the person applying
Get started

Other information about the service

This section contains supplementary details about the service, including descriptions of less common scenarios, exceptions, and additional resources available. It provides context and additional insights that may be relevant to your specific circumstances or interests, helping you understand the full scope and utility of the service offered.

Support

For assistance, email us at  help@gov.ab.ca

h1.page-title {
  margin-bottom: var(--goa-space-l);
}
h2 {
  margin-top: var(--goa-space-xl);
  margin-bottom: 0;
}
h2 + p {
  margin-top: var(--goa-space-l);
}
<h1 className="page-title">
  Name of service
</h1>
<h3>
  A short overview of the service. This is a couple sentences that helps the user understand what the service is.
</h3>
<p>Use this service to apply for [service]. You can use this service to:</p>
<ul>
  <li>see of you or a family member is eligible for [service]</li>
  <li>create and submit an application for [service]</li>
  <li>continue an application for [service] that you already started</li>
</ul>
<h2>Before you begin</h2>
<p>The application form should take about 20 minutes to complete.</p>
<p><strong>In order to complete the application you will need:</strong></p>
<ul>
  <li>government issued ID for the person applying</li>
</ul>
<GoAButton mt="m" mb="xl" type="start" onClick={onClick}>
  Get started
</GoAButton>
<h2>
  Other information about the service
</h2>
<p>
  This section contains supplementary details about the service, including descriptions of less common scenarios, exceptions, and additional resources available. It provides context and additional insights that may be relevant to your specific circumstances or interests, helping you understand the full scope and utility of the service offered.
</p>
<h2>Support</h2>
<p><span>For assistance, email us at &nbsp;</span><a href="mailto:help@gov.ab.ca">help@gov.ab.ca</a></p>
Design guidelines
form pattern start page image

When to use a start page

A start page is the front door to a government service for a citizen. It is the way into the service, how they access the service. Each government service has a start page on Alberta.ca. Contact the relevant person at Alberta.ca to make changes to the start page for your service.

This is the starting point for a citizen to begin your form from within your service or from Alberta.ca.

Provide the user with any information that is important before starting the form such as how long it should take, list documents or information they may need to complete the form, if there are any costs involved, or alternative ways to access the service.

A service's start page should

  • give the user just enough information to help them understand what the service does and whether it will meet their need
  • a service's name should reflects the problem it solves for users
  • be written in plain language — GOA web writing style guide.
  • include a "start button" linking into the service, with text that's consistent with the action you're asking users to take — for example, "Start now", "Sign in" or "Register or update your details"
  • If relevant let users resume an application they've already started or update their details
  • include any other information that most users are likely to need before they start using the service online — for example, how much it costs to use the service and roughly how long it will take
  • include additional information about the service such as other ways to access the service (eg. by telephone or by completing a paper form). This should be included after the main call to action to start the digital service.

Page content

Consider what is the primary information that the user needs to know before entering into the service. Provide that information to the user clearly, and then provide a link to start using the service. Provide additional secondary information below the call to action.

service page content image

Overview

What the user needs to know before they enter into the service. A high level description of what the service is and what you can use it to do

Before you begin

  • how long it will take
  • what you will need to complete the service
    • e.g. specific documents
  • other important information

Call to action

Below the primary information, include an obvious call to action to get started with the service.

Other information

Below the call to action, include any additional information as applicable such as customer support, frequently asked questions, or related links.

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours
Get startedPatternsComponentsStylesContentSubmit an issue#design-system-supportContribute to the design systemGive feedbackRelease notes