1. Government Frontend Component Guide
  2. Chevron Banner

Component

Chevron Banner

A branded banner for use on EU Exit campaign pages. This should not be used on non-campaign pages.

How it looks (preview all)

How to call this component

<%= render "govuk_publishing_components/components/chevron_banner", {
  href: "/test-link",
  text: "Gwiriwch beth sydd angen i chi wneud os nad oes cytundeb"
} %>

Accessibility acceptance criteria

The component must:

  • accept focus
  • be focusable with a keyboard
  • be usable with a keyboard
  • be usable with touch
  • indicate when they have focus

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

Other examples

With hover border (preview)

<%= render "govuk_publishing_components/components/chevron_banner", {
  href: "/test-link",
  text: "This is some text",
  hover_border: true
} %>

With data attributes (preview)

<%= render "govuk_publishing_components/components/chevron_banner", {
  href: "/test-link",
  text: "This is some text",
  data_attributes: {
    "track-category": "startButtonClicked",
    "track-action": "/test-link",
    "track-label": "This is some text",
    module: "track-click"
  }
} %>