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
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:
- Find out when the next bank holiday is in Scotland.
- 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:
- You would like to change your answer for one of the questions.
Notes
The links to change your answers are not functional.
Child maintenance
Open this example in a new tab: child maintenance
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:
- Activate the Exit this Page button by clicking it
- Activate the Exit this Page button by pressing the Esc key 3 times
- Activating the Exit this Page button on a small screen view
- Scoll down the page to see if the Exit this Page button remains sticky
- Tabbing through the page to find the Exit this Page “skip link” at the top of the accessibility tree
Confirm delete
Cookie banner (client side)
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.
Cookie banner (essential cookies)
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.
Cookie banner (server side with progressive enhancement)
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:
- 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.
Say that you want a reply, but avoid filling in the details of how you would like to be contacted.
Avoid answering the question “Do you want a reply?”
Notes
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:
- 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:
- 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:
- Intentionally avoid answering the questions before continuing to the next page.
- Intentionally only fill in the day (and not month or year) of the expiry date.
Search
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:
- Sort the list of results so that the oldest results are first.
- 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.
Start page
Open this example in a new tab: start page
You want to apply for a passport.
Things to try:
- 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:
- 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:
- 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:
- 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:
- 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:
- Select ‘British’ or ‘Irish’
- Select ‘Citizen of a different country’ and provide a country name
- Select ‘Citizen of a different country’ and submit the form without providing a country name
- Do not select any of the options, and use ‘Help with nationality’ to provide a reason why you cannot provide your nationality.
- 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:
- 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:
- 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:
- You would like to change your answer for one of the questions for one of the records.
- You would like to delete a record
- You would like to add a new record
Notes
The links to change your answers are not functional.