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-l">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" draggable="false" class="govuk-button govuk-!-margin-top-2 govuk-!-margin-bottom-8 govuk-button--start" data-module="govuk-button">
Start now
<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
<path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
</svg></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 cannot 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 class="govuk-link" href="#">
Related link
</a>
</li>
<li>
<a class="govuk-link" href="#">
Related link
</a>
</li>
<li>
<a href="#" class="govuk-link govuk-!-font-weight-bold">
More <span class="govuk-visually-hidden">in Subsection</span>
</a>
</li>
</ul>
</nav>
</aside>
</div>
</div>
</main>
</div>{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
{% from "govuk/components/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-l">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-!-margin-top-2 govuk-!-margin-bottom-8",
isStartButton: true
}) }}
<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 cannot 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 class="govuk-link" href="#">
Related link
</a>
</li>
<li>
<a class="govuk-link" href="#">
Related link
</a>
</li>
<li>
<a href="#" class="govuk-link 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:
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.
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.
The ‘Start now’ call-to-action button.
A list of other ways to access your service.
This is a set pattern, so you will not 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-l">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" draggable="false" class="govuk-button govuk-!-margin-top-2 govuk-!-margin-bottom-8 govuk-button--start" data-module="govuk-button">
Start now
<svg class="govuk-button__start-icon" xmlns="http://www.w3.org/2000/svg" width="17.5" height="19" viewBox="0 0 33 40" aria-hidden="true" focusable="false">
<path fill="currentColor" d="M0 0h13l20 20-20 20H0l20-20z" />
</svg></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 cannot 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 class="govuk-link" href="#">
Related link
</a>
</li>
<li>
<a class="govuk-link" href="#">
Related link
</a>
</li>
<li>
<a href="#" class="govuk-link govuk-!-font-weight-bold">
More <span class="govuk-visually-hidden">in Subsection</span>
</a>
</li>
</ul>
</nav>
</aside>
</div>
</div>
</main>
</div>{% from "govuk/components/breadcrumbs/macro.njk" import govukBreadcrumbs %}
{% from "govuk/components/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-l">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-!-margin-top-2 govuk-!-margin-bottom-8",
isStartButton: true
}) }}
<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 cannot 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 class="govuk-link" href="#">
Related link
</a>
</li>
<li>
<a class="govuk-link" href="#">
Related link
</a>
</li>
<li>
<a href="#" class="govuk-link govuk-!-font-weight-bold">
More <span class="govuk-visually-hidden">in Subsection</span>
</a>
</li>
</ul>
</nav>
</aside>
</div>
</div>
{% endblock %}Help improve this page
To help make sure that this page is useful, relevant and up to date, you can:
- share your research or feedback on GitHub
- propose a change – read more about how to propose changes in GitHub
Need help?
If you’ve got a question about the GOV.UK Design System, contact the team.