Start page

React

Angular

Web Components

const handleClick = () => {
    console.log("Get started clicked");
  };

<GoabText size="heading-xl" mt="none" mb="l">Name of service</GoabText>
      <GoabText size="body-l" mt="none" mb="none">
        A short overview of the service. This is a couple sentences that helps the user understand
        what the service is.
      </GoabText>
      <GoabText size="body-m" mt="l" mb="s">Use this service to apply for [service]. You can use this service to:</GoabText>
      <ul>
        <li>see if 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>

      <GoabText size="heading-l" mt="xl" mb="none">Before you begin</GoabText>
      <GoabText size="body-m" mt="l" mb="none">The application form should take about 20 minutes to complete.</GoabText>
      <GoabText size="body-m" mt="l" mb="none">
        <strong>In order to complete the application you will need:</strong>
      </GoabText>
      <ul>
        <li>government issued ID for the person applying</li>
      </ul>
      <GoabButton mt="2xl" mb="xl" type="start" onClick={handleClick}>
        Get started
      </GoabButton>

      <GoabText size="heading-l" mt="xl" mb="none">Other information about the service</GoabText>
      <GoabText size="body-m" mt="l" mb="none">
        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.
      </GoabText>

      <GoabText size="heading-l" mt="xl" mb="none">Support</GoabText>
      <GoabText size="body-m" mt="l" mb="none">
        For assistance, email us at <a href="mailto:help@gov.ab.ca">help@gov.ab.ca</a>
      </GoabText>

A start page is the front door to a government service for citizens. It provides essential information about the service and a clear call to action to begin.

When to use

Use this pattern when:

Creating the entry point for a citizen-facing government service
Citizens need to understand what the service does before starting
You need to communicate prerequisites, time estimates, or required documents

Considerations

Keep the overview concise and focused on what users can do
List what documents or information users will need
Include an estimated completion time
Use a prominent “Get started” or “Start now” button
Provide contact information and alternative ways to access the service below the main call to action