Skip links and keyboard navigation

SWE components

Banner

Overview

A banner highlights an action you want people to take or important information on the page.

Default

A banner includes a:

  • title
  • description
  • image
  • optional button.

View example in Storybook

Code

<div id="qg-banner-blurb" style="background: url('https://picsum.photos/926/361') no-repeat center/cover;">
   <div class="blurb">
     <h1>Title of the banner</h1>
     <p>Include a simple and concise description and a descriptive call to action if using a button.</p>
     <p><button type="button" class="qg-btn btn-primary mt-3">Call to action</button></p>
   </div>
</div>
Last updated:
28 June 2024