Components

Hide this page
Experimental

This component is currently experimental because more research is needed to validate it.

Open this hide this page example in a new tab
HTML
<!-- Code sits above the 'skip to main content' <div> to warn users that this feature exists on the page -->
<div class="govuk-quick-exit__container govuk-visually-hidden">
  <p class="govuk-body">
    To leave the page quickly, press the escape key.
  </p>
</div>

<!-- Code used for the component and sits inside the <main> content wrapper -->
<div class="govuk-quick-exit__container govuk-quick-exit__enabled">
  <div class="govuk-quick-exit__position">
    <a href="https://www.google.com" id="quick-exit" tabindex="-1" class="govuk-button govuk-button--warning govuk-quick-exit">
      <strong>Hide this page</strong>
      <span class="govuk-visually-hidden">Or press escape key to hide this page</span>
    </a>
    <p class="govuk-body govuk-quick-exit--info govuk-!-font-size-14">
      (Or press Esc key)
    </p>
  </div>
  <p class="govuk-button govuk-quick-exit__IEsizing">
    <strong>Hide this page</strong>
  </p>
</div>

When to use this component

The ‘Hide this page’ component helps users to exit a service, website or application quickly and safely.

Use the component when use of a service could put people in danger or at risk of harm. For example, a service about domestic abuse being used by a potential victim.

When to not use this component

Do not use this component if the service or part of the service is unlikely to put a user at risk.

How it works

There are 2 ways to use the warning text component. You can use HTML or, if you are using Nunjucks or the GOV.UK Prototype Kit, you can use the Nunjucks macro.

Help users cover their tracks

Using the component, should help obscure any evidence that a user has visited the service or website.

When a user opts to ‘Hide this page’, this should:

  • change the current tab to a frequently visited website, for example Google obscure the previous page history
  • open a new tab as the active tab. This should be a frequently visited website, for example the BBC Weather website

Use in every place where users are at risk

Add the ‘Hide this page’ component wherever a user could be at risk. This could cover a whole service or parts of a journey where the information is sensitive and could alert a perpetrator.

Make the component clearly visible

Add the ‘Hide this page’ component to the top of every screen you identify as having the potential to put a user at risk.

The component is made up of two parts:

1. Visible button

This should be placed just beneath the header or phase banner.

The button component should always be clearly visible and easy to reach so a user can hide the page immediately when needed.

Use the recommended colour to highlight the importance of the button and make it easy to locate in an emergency situation.

The component can be enabled/disabled by adding or removing the class govuk-quick-exit__enabled.

2. Screen reader and spacing for mobile devices

This should be at the very top of the page, above the skip to main content link.

The component can be enabled/disabled by adding or removing the class govuk-quick-exit__enabled from the main button, and adding the class govuk-visually-hidden from the screen reader information part.

Clearly communicate what will happen

The ‘Hide the page’ text for the button clearly communicates what the component does. It helps users to recognise instantly what happens if they click the button.

Create an alternative keyboard shortcut

You should also offer a keyboard shortcut, for example, using the Escape key. This is necessary for accessibility.

Initial research also suggests that speed is critical for keeping users safe and avoiding potential harm. It may be quicker for users to press a keyboard button than move a mouse pointer.

Add a warning for assistive technology users

Every page where the component is used should have a hidden warning for assistive technologies such as screen readers.

This is done by adding code above the Skip to main content element that is announced when the user using assistive technology arrives on the page.

Use cases (examples of uses)

Research and testing

This component is experimental because there has been limited user research into its usage.

The design, placement and language for this component has evolved through iterations from the Ministry of Justice, Department for Work and Pensions, GOV.UK and the Scottish Government.

There has also been research with a subject matter expert from a specialist provider of services to survivors of domestic abuse.

The component has been tested as part of an accessibility audit by the Digital Accessibility Centre.

Help improve this page

To help make sure that this page is useful, relevant and up to date, you can:

Need help?

If you’ve got a question about the GOV.UK Design System, contact the team.