Attention banner

Formally known as the script banner but renamed to align with code selector. The attention banner alerts users that they have JavaScript disabled in their browser settings.

When to use the attention banner

The attention banner is not dismissible. Only use it to alert users that they have JavaScript disabled in their browser settings.

It must be at the top of the page in a <noscript> tag.

When not to use the attention banner

Do not use the attention banner for any other purpose. If you need to make users aware of other important information, use a highlight.

How attention banners work

When implemented, the attention banner will automatically display.

Example Open in a new tab

<div class="attention-banner">
  <div class="container">
    You appear to have JavaScript disabled in your browser settings. You may
    find some parts of this website do not work properly without it enabled.
  </div>
</div>

Have a question, suggestion or feedback?

The Improving User Experience cluster manages the design system.

If you work in Parliament, contact us on the #design-system Slack channel.