Skip links and keyboard navigation

Global alert

Overview

A global alert is intended to impact the entire website experience. It is full-width and is placed at the top of the every page, above the header.

Default

Global alert heading:

Global alert description. Global alert link.

Code

<div class="alert alert-danger qg-noicon qg-global-alert">
  <div class="container-fluid qg-site-width">
    <header>
      <h2>Global alert heading:</h2>
    </header>
    <section>
      <p>Global alert description. <a href="#">Global alert link</a>.</p>
    </section>
  </div>
</div>