Pages Start pages

Use this pattern to test a start page in your prototype.

To get a start page for your public beta or live service, you need to contact the GDS content team before your alpha assessment.

<div class="govuk-width-container">
  <div class="govuk-breadcrumbs">
    <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="#">Home</a>
      </li>
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="#">Section</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="page">Subsection</li>
    </ol>
  </div>

  <main class="govuk-main-wrapper " id="main-content" role="main">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-xl">Service name goes here</h1>

        <p class="govuk-body">Use this service to:</p>

        <ul class="govuk-list govuk-list--bullet">
          <li>do something</li>
          <li>update your name, address or other details</li>
          <li>do something else</li>
        </ul>

        <p class="govuk-body">Registering takes around 5 minutes.</p>

        <a href="#" role="button" class="govuk-button govuk-button--start govuk-!-margin-top-2 govuk-!-margin-bottom-8">
  Start now
</a>

        <h2 class="govuk-heading-m">Before you start</h2>

        <p class="govuk-body">You can also <a class="govuk-link" href="#">register by post</a>.</p>

        <p class="govuk-body">The online service is also available in <a class="govuk-link" href="#">Welsh (Cymraeg)</a>.</p>

        <p class="govuk-body">You can’t register for this service if you’re in the UK illegally.</p>
      </div>

      <div class="govuk-grid-column-one-third">

        <!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->

        <aside class="app-related-items" role="complementary">
          <h2 class="govuk-heading-m" id="subsection-title">
            Subsection
          </h2>
          <nav role="navigation" aria-labelledby="subsection-title">
            <ul class="govuk-list govuk-!-font-size-16">
              <li>
                <a href="#">
                Related link
              </a>
              </li>
              <li>
                <a href="#">
                Related link
              </a>
              </li>
              <li>
                <a href="#" class="govuk-!-font-weight-bold">
                More <span class="govuk-visually-hidden">in Subsection</span>
              </a>
              </li>
            </ul>
          </nav>
        </aside>

      </div>
    </div>
  </main>
</div>
{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
{% from "button/macro.njk" import govukButton %}

{% block beforeContent %}
  {{ govukBreadcrumbs({
    items: [
      {
        text: "Home",
        href: "#"
      },
      {
        text: "Section",
        href: "#"
      },
      {
        text: "Subsection"
      }
    ]
  }) }}
{% endblock %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <h1 class="govuk-heading-xl">Service name goes here</h1>

      <p class="govuk-body">Use this service to:</p>

      <ul class="govuk-list govuk-list--bullet">
        <li>do something</li>
        <li>update your name, address or other details</li>
        <li>do something else</li>
      </ul>

      <p class="govuk-body">Registering takes around 5 minutes.</p>

      {{ govukButton({
        text: "Start now",
        href: "#",
        classes: "govuk-button--start govuk-!-margin-top-2 govuk-!-margin-bottom-8"
      }) }}

      <h2 class="govuk-heading-m">Before you start</h2>

      <p class="govuk-body">You can also <a class="govuk-link" href="#">register by post</a>.</p>

      <p class="govuk-body">The online service is also available in <a class="govuk-link" href="#">Welsh (Cymraeg)</a>.</p>

      <p class="govuk-body">You can’t register for this service if you’re in the UK illegally.</p>
    </div>

    <div class="govuk-grid-column-one-third">

      <!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->

      <aside class="app-related-items" role="complementary">
        <h2 class="govuk-heading-m" id="subsection-title">
          Subsection
        </h2>
        <nav role="navigation" aria-labelledby="subsection-title">
          <ul class="govuk-list govuk-!-font-size-16">
            <li>
              <a href="#">
                Related link
              </a>
            </li>
            <li>
              <a href="#">
                Related link
              </a>
            </li>
            <li>
              <a href="#" class="govuk-!-font-weight-bold">
                More <span class="govuk-visually-hidden">in Subsection</span>
              </a>
            </li>
          </ul>
        </nav>
      </aside>

    </div>
  </div>
{% endblock %}

When to use this pattern

If your service is in public beta or live, you must have a starting point hosted on GOV.UK. This will link your service to the rest of GOV.UK.

You can use the coded example here to test what works best for your users in prototypes.

How it works

Start pages include 4 main elements:

  1. The service name: this should help people understand what your service does and whether they need to use it - learn more about naming your service.

  2. A short introduction to list things that most users will need to know, for example, what your service will let them do or how much it’ll cost.

  3. The ‘Start now’ call-to-action button.

  4. A list of other ways to access your service.

This is a set pattern, so you won’t be able to customise it.

Read guidance on what information should go on a start page in the Service Manual.

<div class="govuk-width-container">
  <div class="govuk-breadcrumbs">
    <ol class="govuk-breadcrumbs__list">
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="#">Home</a>
      </li>
      <li class="govuk-breadcrumbs__list-item">
        <a class="govuk-breadcrumbs__link" href="#">Section</a>
      </li>
      <li class="govuk-breadcrumbs__list-item" aria-current="page">Subsection</li>
    </ol>
  </div>

  <main class="govuk-main-wrapper " id="main-content" role="main">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h1 class="govuk-heading-xl">Service name goes here</h1>

        <p class="govuk-body">Use this service to:</p>

        <ul class="govuk-list govuk-list--bullet">
          <li>do something</li>
          <li>update your name, address or other details</li>
          <li>do something else</li>
        </ul>

        <p class="govuk-body">Registering takes around 5 minutes.</p>

        <a href="#" role="button" class="govuk-button govuk-button--start govuk-!-margin-top-2 govuk-!-margin-bottom-8">
  Start now
</a>

        <h2 class="govuk-heading-m">Before you start</h2>

        <p class="govuk-body">You can also <a class="govuk-link" href="#">register by post</a>.</p>

        <p class="govuk-body">The online service is also available in <a class="govuk-link" href="#">Welsh (Cymraeg)</a>.</p>

        <p class="govuk-body">You can’t register for this service if you’re in the UK illegally.</p>
      </div>

      <div class="govuk-grid-column-one-third">

        <!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->

        <aside class="app-related-items" role="complementary">
          <h2 class="govuk-heading-m" id="subsection-title">
            Subsection
          </h2>
          <nav role="navigation" aria-labelledby="subsection-title">
            <ul class="govuk-list govuk-!-font-size-16">
              <li>
                <a href="#">
                Related link
              </a>
              </li>
              <li>
                <a href="#">
                Related link
              </a>
              </li>
              <li>
                <a href="#" class="govuk-!-font-weight-bold">
                More <span class="govuk-visually-hidden">in Subsection</span>
              </a>
              </li>
            </ul>
          </nav>
        </aside>

      </div>
    </div>
  </main>
</div>
{% from "breadcrumbs/macro.njk" import govukBreadcrumbs %}
{% from "button/macro.njk" import govukButton %}

{% block beforeContent %}
  {{ govukBreadcrumbs({
    items: [
      {
        text: "Home",
        href: "#"
      },
      {
        text: "Section",
        href: "#"
      },
      {
        text: "Subsection"
      }
    ]
  }) }}
{% endblock %}

{% block content %}
  <div class="govuk-grid-row">
    <div class="govuk-grid-column-two-thirds">
      <h1 class="govuk-heading-xl">Service name goes here</h1>

      <p class="govuk-body">Use this service to:</p>

      <ul class="govuk-list govuk-list--bullet">
        <li>do something</li>
        <li>update your name, address or other details</li>
        <li>do something else</li>
      </ul>

      <p class="govuk-body">Registering takes around 5 minutes.</p>

      {{ govukButton({
        text: "Start now",
        href: "#",
        classes: "govuk-button--start govuk-!-margin-top-2 govuk-!-margin-bottom-8"
      }) }}

      <h2 class="govuk-heading-m">Before you start</h2>

      <p class="govuk-body">You can also <a class="govuk-link" href="#">register by post</a>.</p>

      <p class="govuk-body">The online service is also available in <a class="govuk-link" href="#">Welsh (Cymraeg)</a>.</p>

      <p class="govuk-body">You can’t register for this service if you’re in the UK illegally.</p>
    </div>

    <div class="govuk-grid-column-one-third">

      <!-- The Related items component is not part of GOV.UK Frontend but will be styled if used in the Prototype Kit -->

      <aside class="app-related-items" role="complementary">
        <h2 class="govuk-heading-m" id="subsection-title">
          Subsection
        </h2>
        <nav role="navigation" aria-labelledby="subsection-title">
          <ul class="govuk-list govuk-!-font-size-16">
            <li>
              <a href="#">
                Related link
              </a>
            </li>
            <li>
              <a href="#">
                Related link
              </a>
            </li>
            <li>
              <a href="#" class="govuk-!-font-weight-bold">
                More <span class="govuk-visually-hidden">in Subsection</span>
              </a>
            </li>
          </ul>
        </nav>
      </aside>

    </div>
  </div>
{% endblock %}

Research on this pattern

If you’ve used this pattern, get in touch to share your user research findings.

Get in touch

If you’ve got a question, idea or suggestion share it in #govuk-design-system on cross-government Slack (open in app) or email the Design System team on govuk-design-system-support@digital.cabinet-office.gov.uk

Discuss ‘Start pages’ on GitHub