<mainclass="govuk-main-wrapper govuk-main-wrapper--l"id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">
You will be able to use the service from 9am on Monday 19 November 2018.
</p><pclass="govuk-body"><aclass="govuk-link"href="#">Contact the Tax Credits Helpline</a> if you need to make changes to your claim or speak to someone about your tax credits.
</p></div></div></main></div>
{% block content %}
<div class="govuk-grid-row">
<divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">
You will be able to use the service from 9am on Monday 19 November 2018.
</p><pclass="govuk-body"><aclass ="govuk-link"href="#">Contact the Tax Credits Helpline</a> if you need to make changes to your claim or speak to someone about your tax credits.
</p></div>
</div>
{% endblock %}
When to use this pattern
Use a service unavailable page when a service has been closed on purpose. This could be for a specific period of time or permanently.
Have a general page in case you need to close a service and do not have time to update the page. As soon as you know when the service will be available, update the page.
How it works
The page should have:
‘Sorry, the service is unavailable – service name – GOV.UK’ as the page title
‘Sorry, the service is unavailable’ as the H1
the day, date and time it is going to be available or what to do if it is permanently closed
information about what has happened to their answers if they are in the middle of a transaction
contact information, if it exists and helps meet a user need
a link to another service, if they can use it to do what they came to do
Contact information should either be:
a link to a specific page that includes numbers and opening times
include all numbers and opening times
Have clear and concise content and do not use:
breadcrumbs
vague, unhelpful words like maintenance, improvements
<mainclass="govuk-main-wrapper govuk-main-wrapper--l"id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">
You will be able to use the service later.
</p><pclass="govuk-body">
We saved your answers. They will be available for 30 days.
</p><pclass="govuk-body"><aclass="govuk-link"href="#">
Contact the Tax Credits Helpline</a> if you need to make changes to your claim or speak to someone about your tax credits.
</p></div></div></main></div>
{% block content %}
<div class="govuk-grid-row">
<divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">
You will be able to use the service later.
</p><pclass="govuk-body">
We saved your answers. They will be available for 30 days.
</p><pclass="govuk-body"><aclass="govuk-link"href="#">
Contact the Tax Credits Helpline</a> if you need to make changes to your claim or speak to someone about your tax credits.
</p></div>
</div>
{% endblock %}
When you know when a service will be available
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/patterns/service-unavailable-pages/available-at-known-date/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">when you know when a service will be available</span>
example in a new tab
</a>
</div>
<iframe title="When you know when a service will be available example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/service-unavailable-pages/available-at-known-date/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-when-you-know-when-a-service-will-be-available-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#when-you-know-when-a-service-will-be-available-example-html" role="tab" aria-controls="when-you-know-when-a-service-will-be-available-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#when-you-know-when-a-service-will-be-available-example-nunjucks" role="tab" aria-controls="when-you-know-when-a-service-will-be-available-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#when-you-know-when-a-service-will-be-available-example-html" aria-controls="when-you-know-when-a-service-will-be-available-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="when-you-know-when-a-service-will-be-available-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-width-container"</span>></span>
<mainclass="govuk-main-wrapper govuk-main-wrapper--l"id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">
You will be able to use the service on Monday 19 November 2018.
</p><pclass="govuk-body">
We have not saved your answers. When the service is available, you will have to start again.
</p><pclass="govuk-body"><aclass="govuk-link"href="#">Contact the Tax Credits Helpline</a> if you need to make changes to your claim or speak to someone about your tax credits.
</p></div></div></main></div>
{% block content %}
<div class="govuk-grid-row">
<divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">
You will be able to use the service on Monday 19 November 2018.
</p><pclass="govuk-body">
We have not saved your answers. When the service is available, you will have to start again.
</p><pclass="govuk-body"><aclass ="govuk-link"href="#">Contact the Tax Credits Helpline</a> if you need to make changes to your claim or speak to someone about your tax credits.
</p></div>
</div>
{% endblock %}
A link to another service
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/patterns/service-unavailable-pages/link-to-another-service/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">a link to another service – service unavailable pages</span>
example in a new tab
</a>
</div>
<iframe title="A link to another service – Service unavailable pages example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/service-unavailable-pages/link-to-another-service/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-a-link-to-another-service-service-unavailable-pages-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#a-link-to-another-service-service-unavailable-pages-example-html" role="tab" aria-controls="a-link-to-another-service-service-unavailable-pages-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#a-link-to-another-service-service-unavailable-pages-example-nunjucks" role="tab" aria-controls="a-link-to-another-service-service-unavailable-pages-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#a-link-to-another-service-service-unavailable-pages-example-html" aria-controls="a-link-to-another-service-service-unavailable-pages-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="a-link-to-another-service-service-unavailable-pages-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-width-container"</span>></span>
<mainclass="govuk-main-wrapper govuk-main-wrapper--l"id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">
You will be able to use the service from 9am on Monday 19 November 2018.
</p><pclass="govuk-body">
You can <aclass="govuk-link"href="#">change other VAT details</a>.
</p><pclass="govuk-body"><aclass="govuk-link"href="#">Contact the Tax Credits Helpline</a> if you need to make changes to your claim or speak to someone about your tax credits.
</p></div></div></main></div>
{% block content %}
<div class="govuk-grid-row">
<divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">
You will be able to use the service from 9am on Monday 19 November 2018.
</p><pclass="govuk-body">
You can <aclass="govuk-link"href="#">change other VAT details</a>.
</p><pclass="govuk-body"><aclass="govuk-link"href="#">Contact the Tax Credits Helpline</a> if you need to make changes to your claim or speak to someone about your tax credits.
</p></div>
</div>
{% endblock %}
Service is closed for part of the year
This is for a service like tax credit renewals.
After a service closes
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/patterns/service-unavailable-pages/after-service-closes/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">after a service closes</span>
example in a new tab
</a>
</div>
<iframe title="After a service closes example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/service-unavailable-pages/after-service-closes/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-after-a-service-closes-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#after-a-service-closes-example-html" role="tab" aria-controls="after-a-service-closes-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#after-a-service-closes-example-nunjucks" role="tab" aria-controls="after-a-service-closes-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#after-a-service-closes-example-html" aria-controls="after-a-service-closes-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="after-a-service-closes-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-width-container"</span>></span>
<mainclass="govuk-main-wrapper govuk-main-wrapper--l"id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">
You cannot use the online service to renew your tax credits.
</p><pclass="govuk-body"><aclass="govuk-link"href="#">Contact the Tax Credits Helpline</a> to renew your tax credits by phone or letter.
</p><pclass="govuk-body">
You can use the tax credits service to:
</p><ulclass="govuk-list govuk-list--bullet"><li>find out more about your payments</li><li>see who is on your claim</li><li>make changes to your claim</li><li>check the status of your renewal</li></ul></div></div></main></div>
{% block content %}
<div class="govuk-grid-row">
<divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">
You cannot use the online service to renew your tax credits.
</p><pclass="govuk-body"><aclass="govuk-link"href="#">Contact the Tax Credits Helpline</a> to renew your tax credits by phone or letter.
</p><pclass="govuk-body">
You can use the tax credits service to:
</p><ulclass="govuk-list govuk-list--bullet"><li>find out more about your payments</li><li>see who is on your claim</li><li>make changes to your claim</li><li>check the status of your renewal</li></ul></div>
</div>
{% endblock %}
Before a service opens
Do not include any contact information.
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/patterns/service-unavailable-pages/before-service-opens/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">before a service opens</span>
example in a new tab
</a>
</div>
<iframe title="Before a service opens example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/service-unavailable-pages/before-service-opens/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-before-a-service-opens-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#before-a-service-opens-example-html" role="tab" aria-controls="before-a-service-opens-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#before-a-service-opens-example-nunjucks" role="tab" aria-controls="before-a-service-opens-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#before-a-service-opens-example-html" aria-controls="before-a-service-opens-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="before-a-service-opens-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-width-container"</span>></span>
<mainclass="govuk-main-wrapper govuk-main-wrapper--l"id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">
You will be able to renew your tax credits from Tuesday 24 April 2018.
</p><pclass="govuk-body"><aclass="govuk-link"href="#">
Contact the Tax Credits Helpline</a> to renew your tax credits by phone or letter.
</p><pclass="govuk-body">
You can <aclass="govuk-link"href="#">use the tax credits service</a> to:
</p><ulclass="govuk-list govuk-list--bullet"><li>find out more about your payments</li><li>see who is on your claim</li><li>make changes to your claim</li></ul></div></div></main></div>
{% block content %}
<div class="govuk-grid-row">
<divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">
You will be able to renew your tax credits from Tuesday 24 April 2018.
</p><pclass="govuk-body"><aclass="govuk-link"href="#">
Contact the Tax Credits Helpline</a> to renew your tax credits by phone or letter.
</p><pclass="govuk-body">
You can <aclass="govuk-link"href="#">use the tax credits service</a> to:
</p><ulclass="govuk-list govuk-list--bullet"><li>find out more about your payments</li><li>see who is on your claim</li><li>make changes to your claim</li></ul></div>
</div>
{% endblock %}
Service is closed forever
Nothing has replaced the service
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/patterns/service-unavailable-pages/no-replacement-service/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">nothing has replaced the service</span>
example in a new tab
</a>
</div>
<iframe title="Nothing has replaced the service example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/service-unavailable-pages/no-replacement-service/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-nothing-has-replaced-the-service-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#nothing-has-replaced-the-service-example-html" role="tab" aria-controls="nothing-has-replaced-the-service-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#nothing-has-replaced-the-service-example-nunjucks" role="tab" aria-controls="nothing-has-replaced-the-service-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#nothing-has-replaced-the-service-example-html" aria-controls="nothing-has-replaced-the-service-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="nothing-has-replaced-the-service-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-width-container"</span>></span>
<mainclass="govuk-main-wrapper govuk-main-wrapper--l"id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">
The submit an employment intermediary report service has closed.
</p><pclass="govuk-body">
Contact us if you need to speak to someone about the service and your reports.
</p><pclass="govuk-body">Telephone:<br><strongclass="govuk-!-font-weight-bold">0808 157 3900</strong></p><pclass="govuk-body">Opening times:<br><strongclass="govuk-!-font-weight-bold">Monday to Friday: 8:30am to 4:30pm</strong></p></div></div></main></div>
{% block content %}
<div class="govuk-grid-row">
<divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">
The submit an employment intermediary report service has closed.
</p><pclass="govuk-body">
Contact us if you need to speak to someone about the service and your reports.
</p><pclass="govuk-body">Telephone:<br><strongclass="govuk-!-font-weight-bold">0808 157 3900</strong></p><pclass="govuk-body">Opening times:<br><strongclass="govuk-!-font-weight-bold">Monday to Friday: 8:30am to 4:30pm</strong></p></div></div>
{% endblock %}
Something has replaced the service
<div class="app-example app-example--tabs">
<div class="app-example__toolbar">
<a href="/patterns/service-unavailable-pages/service-replaced/index.html" class="app-example__new-window" target="_blank">
Open this
<span class="govuk-visually-hidden">something has replaced the service</span>
example in a new tab
</a>
</div>
<iframe title="Something has replaced the service example" data-module="app-example-frame" class="app-example__frame app-example__frame--resizable" src="/patterns/service-unavailable-pages/service-replaced/index.html" frameBorder="0" loading="lazy"></iframe>
</div>
<span id="options-something-has-replaced-the-service-example"></span>
<ul class="app-tabs" role="tablist">
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#something-has-replaced-the-service-example-html" role="tab" aria-controls="something-has-replaced-the-service-example-html" data-track="tab-html">HTML</a></li>
<li class="app-tabs__item js-tabs__item" role="presentation"><a href="#something-has-replaced-the-service-example-nunjucks" role="tab" aria-controls="something-has-replaced-the-service-example-nunjucks" data-track="tab-nunjucks">Nunjucks</a></li>
</ul>
<div class="app-tabs__heading js-tabs__heading"><a href="#something-has-replaced-the-service-example-html" aria-controls="something-has-replaced-the-service-example-html" data-track="tab-html">HTML</a></div>
<div class="app-tabs__container js-tabs__container" id="something-has-replaced-the-service-example-html" role="tabpanel">
<div class="app-example__code">
<pre data-module="app-copy" tabindex="0"><code class="hljs html"><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">class</span>=<span class="hljs-string">"govuk-width-container"</span>></span>
<mainclass="govuk-main-wrapper govuk-main-wrapper--l"id="main-content"role="main"><divclass="govuk-grid-row"><divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">Universal Credit has replaced tax credits.</p><pclass="govuk-body"><aclass="govuk-link"href="#">
Contact the Tax Credits Helpline</a> if you need to speak to someone about your tax credits.
</p><pclass="govuk-body">You can:</p><ulclass="govuk-list govuk-list--bullet"><li><aclass="govuk-link"href="#">find out more about Universal Credit</a></li><li><aclass="govuk-link"href="#">apply for Universal Credit</a></li><li><aclass="govuk-link"href="#">sign in to your Universal Credit account</a></li></ul></div></div></main></div>
{% block content %}
<div class="govuk-grid-row">
<divclass="govuk-grid-column-two-thirds"><h1class="govuk-heading-l">Sorry, the service is unavailable</h1><pclass="govuk-body">Universal Credit has replaced tax credits.</p><pclass="govuk-body"><aclass="govuk-link"href="#">
Contact the Tax Credits Helpline</a> if you need to speak to someone about your tax credits.
</p><pclass="govuk-body">You can:</p><ulclass="govuk-list govuk-list--bullet"><li><aclass="govuk-link"href="#">find out more about Universal Credit</a></li><li><aclass="govuk-link"href="#">apply for Universal Credit</a></li><li><aclass="govuk-link"href="#">sign in to your Universal Credit account</a></li></ul></div>
</div>
{% endblock %}
Research on this pattern
This pattern was tested with 5 users. The user needs identified were to say:
when the service will be available
how they can do what they came to do
To meet the needs:
give clear information about when the service will be available again
if the service has closed forever, what has replaced it
say what someone needs to do if they need to speak to someone
include a link to another service or contact information about offline support
Next steps
More research is needed to find out:
what people need to know
what their expectations are after reading the page
if people understand what is going on when they see the page
Help improve this pattern
To help make sure that this page is useful, relevant and up to date, you can: