Cookie banner

Allow users to accept or reject cookies which are not essential to making your service work.

Content passed into the cookie banner via a block will be rendered as the cookie banner’s body.

The cookie banner also accepts one or more actions. These should be buttons or links and will be placed in a govuk-button-group at the bottom of the cookie banner.

= govuk_cookie_banner do |cb|
  - cb.with_message(heading_text: "Cookies on this service") do |m|
    - m.with_action { govuk_button_link_to("Accept additional cookies", "#") }
    - m.with_action { govuk_button_link_to("Reject additional cookies", "#") }
    - m.with_action { govuk_link_to("Read the cookie policy", "#") }

    p
      | We use some essential cookies to make this service work.

    p
      | We’d also like to use analytics cookies so we can understand
        how you use the service and make improvements.

<%= govuk_cookie_banner do |cb|
cb.with_message(heading_text: "Cookies on this service") do |m|
m.with_action { govuk_button_link_to("Accept additional cookies", "#") }
m.with_action { govuk_button_link_to("Reject additional cookies", "#") }
m.with_action { govuk_link_to("Read the cookie policy", "#") }

 %>
<p>
  We use some essential cookies to make this service work.
</p>
<p>
  We’d also like to use analytics cookies so we can understand
  how you use the service and make improvements.
</p>
<% end; end %>

Output

Rendered
HTML

<div role="region" aria-label="Cookie banner" data-nosnippet="true" class="govuk-cookie-banner govuk-!-display-none-print">
  <div class="govuk-cookie-banner__message govuk-width-container">
    <div class="govuk-grid-row">
      <div class="govuk-grid-column-two-thirds">
        <h2 class="govuk-cookie-banner__heading govuk-heading-m">
          Cookies on this service
        </h2>
        <div class="govuk-cookie-banner__content">
          <p>
            We use some essential cookies to make this service work.
          </p>
          <p>
            We’d also like to use analytics cookies so we can understand
            how you use the service and make improvements.
          </p>
        </div>
      </div>
    </div>
    <div class="govuk-button-group">
      <a class="govuk-button" data-module="govuk-button" href="#">
        Accept additional cookies
      </a>
      <a class="govuk-button" data-module="govuk-button" href="#">
        Reject additional cookies
      </a>
      <a class="govuk-link" href="#">
        Read the cookie policy
      </a>
    </div>
  </div>
</div>

Cookie banner

Cookie banner with default arguments

Input

Output

Cookies on this service