Health Design System

Quick Exit

Quick exit

This provides a control to allow users to leave the current page quickly and should be implemented at a page-level for sensitive content pages.

Presentation

The control is fixed to the top of page and remains on scroll. The page body is offset vertically by the height of the control.

Trigger

The user can click anywhere in the banner (except the ‘what is this?’ link) or press the ‘escape’ key to leave the page.

Behaviour

  • The browser DOM is cleared
  • The current page is removed from the browser’s history
  • https://www.google.com is loaded

Accessibility and usability

  • The control is semantically a button and is focusable using keyboard.
  • The control is presented after the skip link control, which are presented on top of the control on keyboard focus.
  • The control’s colours provide sufficient colour contrast and are designed to grab the users’ attention.
<div id="quickexit" class="quick-exit">
    <button tabindex="1" class="quick-exit__action">
        <div class="quick-exit__container container">
            <div class="quick-exit__icon">
                <span class="svg-inline--fa fa-fw fa-left">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                        <path d="M497 273L329 441c-15 15-41 4.5-41-17v-96H152c-13.3 0-24-10.7-24-24v-96c0-13.3 10.7-24 24-24h136V88c0-21.4 25.9-32 41-17l168 168c9.3 9.4 9.3 24.6 0 34zM192 436v-40c0-6.6-5.4-12-12-12H96c-17.7 0-32-14.3-32-32V160c0-17.7 14.3-32 32-32h84c6.6 0 12-5.4 12-12V76c0-6.6-5.4-12-12-12H96c-53 0-96 43-96 96v192c0 53 43 96 96 96h84c6.6 0 12-5.4 12-12z"></path>
                    </svg>
                </span>
            </div>
            <div class="quick-exit__text">
                <div class="quick-exit__title">Quick exit</div>
                <div class="quick-exit__subline">Click anywhere in this banner
                    <span class="mobile-hidden">or press
                        <span class="quick-exit__subline-key">esc<span class="sr-only">ape</span></span></span>
                    to exit.
                    <a href="https://www.health.gov.au" class="quick-exit__link">What is
                        this?</a>
                </div>
            </div>
        </div>
    </button>
</div>