Skip links and keyboard navigation

SWE components

Quick exit

Overview

The quick exit component can be placed on a page that contains sensitive information. It allows a user to immediately be redirected to an innocuous site (google.com) and to hide what they were looking at.

For desktop users, this feature contains a link to the Tips to browse safely online page, which educates users about how to browse privately (e.g. private tabs, deleting browser history).

Default

The required page placement of this component is immediately below the breadcrumbs. Visit Planning Safety Technology under the Community support franchise for a published example of the quick exit feature.

View example in Storybook

Code

<div class="qg-quick-exit">
  <div class="qg-quick-exit__inner container-fluid qg-site-width">
    <div class="qg-quick-exit__tips">
      <a href="https://www.qld.gov.au/help/tips-to-browse-safely-online" class="qg-quick-exit__tip-link">
        <span class="fa fa-question-circle"></span>
        <span class="qg-quick-exit__tip-title">Tips to browse safely online</span>
      </a>
    </div>
    <div class="qg-quick-exit__actions">
      <ul class="qg-quick-exit__list">
        <li class="qg-quick-exit__item">
          <input type="checkbox" id="qg-quick-exit__input" class="qg-quick-exit__input sr-only">
          <label for="qg-quick-exit__input" class="qg-quick-exit__label qg-tooltip__parent">
            <span class="qg-tooltip__prompt">What is this?</span>
            <div class="qg-tooltip__wrapper">
              <div class="qg-tooltip">
                <span class="qg-tooltip__content">To leave this site quickly, click the 'Close this site' button or press 'ESC' on your keyboard. You will be taken to google.com.au.</span>
              </div>
            </div>
          </label>
        </li>
        <li class="qg-quick-exit__item">
          <button class="qg-quick-exit__button">Close this site</button>
        </li>
      </ul>
    </div>
  </div>
</div>
Last updated:
28 June 2024