This is an internal development app.
To learn how to use the GOV.UK Design System in your project, see Get started.

Skip to main content

Full page examples

These examples are designed to test the styles, components and patterns from GOV.UK Frontend in a realistic context.

Your responses to any questions asked in the examples will not be recorded.

Announcements

Open this example in a new tab: announcements

You want to read this article about ’2018’s oddest requests from Brits abroad’.

Notes

Based on https://www.gov.uk/government/news/strictly-vampires-and-sausages-2018s-oddest-requests-from-brits-abroad

Bank holidays

Open this example in a new tab: bank holidays

You want to know when the next bank holiday will be.

Things to try:

  1. Find out when the next bank holiday is in Scotland.
  2. Find out when the Boxing Day bank holiday is in 2020.

Notes

This example is based on https://www.gov.uk/bank-holidays. The data is not ‘live’ and so the answer is unlikely to be correct.

Campaign page

Open this example in a new tab: campaign page

You want to know the latest updates on the coronavirus pandemic. This is an example of a complex campaign page.

Notes

Based on https://www.gov.uk/coronavirus

Check your answers

Open this example in a new tab: check your answers

As part of an online service, you are asked to check your answers before you send your application.

Things to try:

  1. You would like to change your answer for one of the questions.

Notes

The links to change your answers are not functional.

Child maintenance (exit this page)

Open this example in a new tab: child maintenance (exit this page)

You are a user looking for information on child maintenance.

There is a chance that as a user of this service, you are a victim of domestic abuse, therefore this page includes an Exit this Page component.

Things to try:

  1. Activate the Exit this Page button by clicking it
  2. Activate the Exit this Page button by pressing the Esc key 3 times
  3. Activating the Exit this Page button on a small screen view
  4. Scoll down the page to see if the Exit this Page button remains sticky
  5. Tabbing through the page to find the Exit this Page “skip link” at the top of the accessibility tree

Confirm delete

Open this example in a new tab: confirm delete

Open this example in a new tab: cookie banner (client side)

You need to make a choice about whether to accept cookies or not.

Notes

For this example, when the user makes a choice to accept or reject cookies their preference is handled entirely on the client side with no page navigation, and JavaScript is used to swap out the cookie banner for the ‘confirmation’ banner.

The choice to accept or reject cookies will not be remembered.

The content of the page is not important for this scenario.

Open this example in a new tab: cookie banner (essential cookies)

You are told about essential cookies, with a choice to hide the banner.

Notes

When the user hides the cookie banner, we progressively enhance the cookie banner to hide with JavaScript. If JavaScript is not enabled, the form is submitted and a page navigation occurs.

The choice to hide the banner on subsequent visits will not be remembered.

The content of the page is not important for this scenario.

Open this example in a new tab: cookie banner (server side with progressive enhancement)

You need to make a choice about whether to accept cookies or not.

Notes

For this example, when the user makes a choice to accept or reject cookies the form is submitted and a page navigation occurs, with the confirmation banner shown on the next page.

If the user chooses hides the confirmation banner, we progressively enhance the cookie banner to hide with JavaScript. If JavaScript is not enabled, the page reloads.

The choice to accept or reject cookies will not be remembered.

The content of the page is not important for this scenario.

Feedback

Open this example in a new tab: feedback

You have used a service called GOV.UK Verify and wish to report an issue.

Things to try:

  1. Intentionally put too much content in the feedback box.

“What were you trying to do” question has a limit of 100 characters.

“Please provide details of your question, problem or feedback” has a limit of 300 characters.

  1. Say that you want a reply, but avoid filling in the details of how you would like to be contacted.

  2. Avoid answering the question “Do you want a reply?”

Notes

Based on https://www.signin.service.gov.uk/feedback

Have you changed your name

Open this example in a new tab: have you changed your name

As part of an online service, you are asked if you have changed your name.

Things to try:

  1. Intentionally avoid answering the question before continuing to the next page.

How do you want to sign in

Open this example in a new tab: how do you want to sign in

As part of an online service, you are asked to select how you want to sign in.

Things to try:

  1. Intentionally avoid answering the question before continuing to the next page.

Notes

Based on https://www.gov.uk/log-in-file-self-assessment-tax-return/sign-in/prove-identity

Passport details

Open this example in a new tab: passport details

As part of an online service, you are asked to provide your passport details.

Things to try:

  1. Intentionally avoid answering the questions before continuing to the next page.
  2. Intentionally only fill in the day (and not month or year) of the expiry date.

Open this example in a new tab: search

You would like to find relevant articles by sorting the results and filtering by the organisation(s) that published the articles.

Things to try:

  1. Sort the list of results so that the oldest results are first.
  2. Filter the list of results to show only those published by the Ministry of Defence.

Notes

The filtering and sorting may not be accurate – this is just a demonstration of the sort of interactions that you would find on a search page.

This example merges features seen on GOV.UK news and communication finders and search pages.

Sign in to a service

Open this example in a new tab: sign in to a service

As part of an online service, you have to sign in before accessing it.

Things to try:

  1. Intentionally avoid answering the questions before continuing to the next page.

Start page

Open this example in a new tab: start page

You want to apply for a passport.

Things to try:

  1. Find out other ways to apply

Notes

The buttons and links on this page are not functional.

Task list

Open this example in a new tab: task list

You want to apply for a teacher training course

Things to try:

  1. Making sure all content is visible without overlapping on narrower screens.

Notes

The buttons and links on this page are not functional.

Topic page (service manual)

Open this example in a new tab: topic page (service manual)

You would like to access information on a given topic, perhaps by finding out more about software development processes.

Notes

The links within each section are not functional.

Travel guidance

Open this example in a new tab: travel guidance

You want to read guidance about the entry requirements for travelling to Narnia.

Notes

Based on https://www.gov.uk/foreign-travel-advice/iceland/entry-requirements

Update your account details

Open this example in a new tab: update your account details

As part of an online service, you wish to update your account details.

Things to try:

  1. Intentionally avoid answering the questions before continuing to the next page.

Upload your photo (with confirmation page)

Open this example in a new tab: upload your photo (with confirmation page)

As part of an online service, you are asked to upload your photo.

Things to try:

  1. Intentionally avoid uploading a file and accepting terms and conditions before continuing to the next page.

Upload your photo (with success message)

Open this example in a new tab: upload your photo (with success message)

As part of an online service, you are asked to upload your photo.

The upload will always result in a success (alert) message that uses the notification banner.

What is your address

Open this example in a new tab: what is your address

As part of an online service, you are asked to provide your address.

Things to try:

  1. Intentionally avoid answering the questions before continuing to the next page.

What is your nationality

Open this example in a new tab: what is your nationality

As part of an online service, you are asked to provide your nationality.

Things to try:

  1. Select ‘British’ or ‘Irish’
  2. Select ‘Citizen of a different country’ and provide a country name
  3. Select ‘Citizen of a different country’ and submit the form without providing a country name
  4. Do not select any of the options, and use ‘Help with nationality’ to provide a reason why you cannot provide your nationality.
  5. Intentionally submit the form without selecting any of the options

What is your postcode

Open this example in a new tab: what is your postcode

As part of an online service, you are asked to provide your postcode.

Prompts:

  1. Do not answer the question

What was the last country you visited

Open this example in a new tab: what was the last country you visited

As part of an online service, you are asked to provide the last country you visited.

Things to try:

  1. Intentionally avoid answering the question before continuing to the next page.

Work history

Open this example in a new tab: work history

As part of an online service, you are providing information about previous jobs in the form of multiple job records. You are provided a page to check the records you’ve entered so far, add more or continue with the service.

Things to try:

  1. You would like to change your answer for one of the questions for one of the records.
  2. You would like to delete a record
  3. You would like to add a new record

Notes

The links to change your answers are not functional.