Component

Banner

A page banner, designed to highlight important information

Passing an aside to the banner will mean the banner renders in a grid layout.

Real world example: Consultation with history banner

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

Text in a banner

How to call this component

<%= render "components/banner", {
  text: "Text in a banner"
} %>

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 (defaults to no margin)
• 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”)

History banner (preview)

This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government

<%= render "components/banner", {
  text: "This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government"
} %>

Banner with title (preview)

Summary

We are seeking external users’ views on a series of options for either reducing the scope of the annual Defence Inflation Estimates publication or ceasing it completely.

<%= render "components/banner", {
  title: "Summary",
  text: "We are seeking external users’ views on a series of options for either reducing the scope of the annual Defence Inflation Estimates publication or ceasing it completely."
} %>

Banner with aside (preview)

Title

Text

Aside

<%= render "components/banner", {
  title: "Title",
  text: "Text",
  aside: "Aside"
} %>

Consultation (preview)

Summary

This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government

This consultation ran from: 9:30am on 13 June 2017 to 11:45pm on 11 July 2017

<%= render "components/banner", {
  title: "Summary",
  text: "This was published under the 2010 to 2015 Conservative and Liberal Democrat coalition government",
  aside: sanitize("This consultation ran from: <span class=\"consultation-date\"><time datetime=\"2017-06-13T09:30:00.000+01:00\">9:30am on 13 June 2017</time> to <time datetime=\"2017-07-11T23:45:00.000+01:00\">11:45pm on 11 July 2017</time></span>")
} %>