Component

Banner

A page banner that is currently used on consultations and calls for evidence to display a summary or other important information.

This component requires title and text attribute values passed to it, otherwise it will not render. This reflects how the component is currently used. If the component needed to become more flexible and work for other use cases, we should consider moving it to the gem.

Real world examples:

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Summary

This call for evidence will inform the development of the financial services sector plan, a key part of the government’s modern industrial strategy.

How to call this component

<%= render "components/banner", {
  title: "Summary",
  text: "This call for evidence will inform the development of the financial services sector plan, a key part of the government’s modern industrial strategy."
} %>

Accessibility acceptance criteria

The banner must:

  • be visually distinct from other content on the page
  • have an accessible name that describes the banner as a notice
  • have a text contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA

Other examples

Standard options

This component uses the component wrapper helper. It accepts the following options and applies them to the parent element of the component. See the component wrapper helper documentation for more detail.

  • id - accepts a string for the element ID attribute
  • data_attributes - accepts a hash of data attributes
  • aria - accepts a hash of aria attributes
  • classes - accepts a space separated string of classes, these should not be used for styling and must be prefixed with js-
  • margin_bottom - accepts a number from 0 to 9 (0px to 60px) using the GOV.UK Frontend spacing scale
  • role - accepts a space separated string of roles
  • lang - accepts a language attribute value
  • open - accepts an open attribute value (true or false)
  • hidden - accepts an empty string, ‘hidden’, or ‘until-found’
  • tabindex - accepts an integer. The integer can also be passed as a string
  • dir - accepts ‘rtl’, ‘ltr’, or ‘auto’
  • type - accepts any valid type attribute e.g. ‘button’, ‘submit’, ‘text’
  • rel - accepts any valid rel attribute e.g. ‘nofollow’
  • target - accepts a valid target attribute e.g. ‘_blank’
  • title - accepts any string
  • draggable - accepts a draggable attribute value (“true” or “false”)

With secondary text (preview)

This example shows how the consultation and call for evidence templates use the secondary text to display dates.

Summary

This call for evidence will inform the development of the financial services sector plan, a key part of the government’s modern industrial strategy.

This consultation ran from
to 

<%= render "components/banner", {
  title: "Summary",
  text: "This call for evidence will inform the development of the financial services sector plan, a key part of the government’s modern industrial strategy.",
  secondary_text: sanitize("This consultation ran from<br><strong class=\"consultation-date\"><time datetime=\"2024-11-05T11:00:00.000+00:00\">11am on 5 November 2024</time> to <time datetime=\"2024-12-03T17:00:00.000+00:00\">5pm on 3 December 2024</time></strong>")
} %>