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).

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>