Skip links and keyboard navigation

For government agency options have changed in line with the November 2024 Machinery of government (MoG). For more information, see our MoG change guide.

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