Component

Global banner

A site-wide banner used to convey important information

If a user has consented to cookies the banner will disappear after three page views, unless the always_visible option is used. If no cookie consent is given the banner is always shown.

The dev docs contains further information about this component and when it should be used.

Search for usage of this component on GitHub.

How it looks (preview) (preview all)

How to call this component

<%= render "govuk_publishing_components/components/global_banner", {
  title: "Bring photo ID to vote",
  banner_version: 1
} %>

Accessibility acceptance criteria

Links in the component must:

accept focus
be focusable with a keyboard
be usable with a keyboard
indicate when they have focus
change in appearance when touched (in the touch-down state)
change in appearance when hovered
be usable with touch
be usable with voice commands
have visible text
have meaningful text

Other examples

With a link (preview)

<%= render "govuk_publishing_components/components/global_banner", {
  title: "Bring photo ID to vote",
  title_href: "https://www.gov.uk",
  banner_version: 1
} %>

With a link and text (preview)

<%= render "govuk_publishing_components/components/global_banner", {
  title: "Bring photo ID to vote",
  title_href: "https://www.gov.uk",
  text: "Check what photo ID you'll need to vote in person in the General Election on 4 July.",
  banner_version: 1
} %>

Always visible (preview)

With this option set the banner appears regardless of how many times it has been seen before.

<%= render "govuk_publishing_components/components/global_banner", {
  title: "Bring photo ID to vote",
  banner_version: 1,
  always_visible: true
} %>