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)

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

History banner (preview)

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

Banner with title (preview)

<%= 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)

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

Consultation (preview)

<%= 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>")
} %>