Product banner

The product banner allows you to add a brief description to a website homepage.

The Improving User Experience cluster want to make this component better.

If you work in Parliament and are using it or plan to use it, please contact us on the #design-system Slack channel.

When to use a product banner

Only use product banners for a website homepage.

When not to use a product banner

You must not use product banners with the product header or a hero banner.

How product banners work

The product banner is made up of several content fields.

You must include the name and explanatory text as a minimum. The illustration and more information link are optional.

Name

The name field is for the title of the website or section.

Explanatory text

Use the explanatory text field to give a brief description of the website or section.

It should be concise and summarise what your website is about. It should help users quickly decide if it is relevant to their query. Aim for two or three sentences in length.

Illustration

The illustration option lets you add a decorative element to the page.

Illustrations must be in SVG format for better scaling.

Examples of product banners

Product banner using all elements

Example Open in a new tab

<div class="product-banner">
  <div class="container">
    <div class="row">
      <div class="col-lg-7 col-no-spacing">
        <h1>Website name</h1>
        <p>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
          eiusmod tempor incididunt ut labore et dolore magna aliqua.
        </p>
        <p>
          <a href="#">Find out more about this topic</a>
        </p>
      </div>
      <div class="col-lg-5 image">
        <img aria-hidden="true" src="/images/palace-of-westminster.svg" />
      </div>
    </div>
  </div>
</div>

Product banner with only website title and explanatory text