Skip to main content

Cookie Banner

Cookie banner allows users to accept or reject cookies which are not essential to making your service work.

Overview

The purpose of the cookie banner is to inform users about the use of cookies, obtain their consent, and customise their preferences.

It aids websites in complying with privacy regulations by offering transparency regarding data collection practices and empowering users to control their privacy settings.

A group of tags.

Anatomy

Anatomy of the Banner.
Anatomy of the Modal.
  1. Banner: Contains the content.
  2. Title: Provides context to the Banner.
  3. Body copy: Provides supporting context to the user.
  4. Call to actions: Allow the user to proceed with multiple options.
  5. Modal: A closeable window that overlays a page.
  6. Content: Provides information for the user about the cookie preference options available.
  7. “Save” button: Allows the user to save their preferences and continue with their flow.
  8. Scrim: Screen overlay that obscures the on-page content.

Variants

Cookie banner with copy about cookies and buttons to accept or manage preferences.
Modal with options to authorise cookies.

Modifiers

Default

Default cookie banner, with Accept All as primary action only.

Primary actions only

This version is used when legal compliance in the country requires you to do so. In countries that do not require this, the default variation is used.

Cookie banner, with Accept All and Necessary Only as primary actions.

Interaction area

Banner with highlights on the areas of interaction: links and buttons.
Modal with highlights on the areas of interaction: links and buttons.
  • Redirect: Redirects the user to the page they have selected in a new tab, the cookie banner will continue to show until the user makes a selection.
  • Confirm selection: Saves the user's selection and closes the modal and cookie banner.
  • Opens a “Manage preferences” modal: A modal will open to allow the user to manage their preferences.
  • Toggle on/off: Allows the user to toggle selections on or off.
  • Back button: Closes the modal and shows the cookie banner again.

Content

The ‘header’, ‘body copy’, and ‘button labels’ are set and should not be changed, unless you need to translate them into another language.

Behaviours

The background page of the cookie banner isn’t disabled, and is only disabled once the modal is opened. The “Select your country” popover from the top navigation should sit on top of the banner so that the users can change the locale.

Banner positioned at the bottom with the “Select your country” popover on top of the banner.

The background page is disabled when the modal is opened until the user has made a selection and is ready to continue with their flow, or returns to the banner. A scrim is applied and the banner disappears.

Cookie modal that positioned in the middle of the screen, on top of a dark overlay.

Turn all on / off

Once the overarching toggle is toggled on/off, the child toggles follow suit. The overarching toggle will not be toggled on unless all child toggles are selected.

Modal showing the toggles states when

Size

Wide width

The wide cookie banner has a minimum width of 700px and a maximum width of 1024px.

Example of the Cookie banner with wide width.

Narrow width

The narrow cookie banner has a minimum width of 320px and a maximum width of 699px.

Example of the Cookie banner with narrow width.

Positioning

The cookie banner is always positioned at the bottom of the screen with default bottom, left and right padding of 16px from the container of the banner.

Image of a frame with the banner positioned at the bottom.

The modal is positioned in the centre of the screen with a scrim applied.

Image of a frame with the modal positioned in the middle of the screen.

Motion

Illustrates the movement taking place when the cookie banner enters and exit from view. You can see an animated example in our drive.

A chart showing the timing of the cookie banner's Y Translate and Opacity animations, both running over 400 milliseconds.

Enter transition

As the cookie banner enters the view, it ascends by 75% of the component’s height over 400 milliseconds from its final position, simultaneously fading into view without any delay.

A chart showing the cookie banner component's enter transition with an Y Translate animation.
PropertyCubic BezierEasing tokenNotes
Translate Y(.45, 0, .55, 1)$easing-functionalMoves up 16px from point of origin at 400ms
Opacity(.45, 0, .55, 1)$easing-functionalCookie banner gently fades into view at 400ms

Exit transition

When the cookie banner exits from view it moves down 75% of the component’s height at 150ms from the final position. At the same time it fades out of view. Exit transitions are always quicker than entry.

A chart showing the cookie banner component's exit transition with an Y Translate animation.
PropertyCubic BezierEasing tokenNotes
Translate Y(.45, 0, .55, 1)$easing-functionalMoves down 4px towards point of origin at 150ms
Opacity(.45, 0, .55, 1)$easing-functionalCookie banner gently fades out at 150ms
For enter and exit transitions, please refer to the motion documentation for the modal component.

Overlapping transitions

As the pattern consists of two components, the transition between the banner exiting and the modal entering should overlap, ensuring a smooth and seamless transition.

A chart showing the timing of overlapping transitions between the cookie banner and modal components.

Examples LTR

Narrow (left-to-right)

At the narrow breakpoints, the banner has a maximum height of 432px, and the modal is set to full screen. If the content overflows due to a change in language, the available height, the call to action buttons and header become sticky and the body content scrolls.

Responsive banner as it looks on mobile views showcasing a scroll bar for the content.
Responsive modal as it looks on mobile views showcasing a scroll bar for the options and content.

Examples RTL

For languages that read right-to-left, the layout and alignment of the content is reorganised so the readability of the component makes logical sense.

Wide

Banner displaying right-to-left content.
Modal displaying right-to-left content.

Narrow

Responsive banner displaying right-to-left content.
Responsive modal displaying right-to-left content.

Resources

Figma Web Component
 Stable
Figma Web Documentation
 Stable
Figma App Component
 Stable
Figma App Documentation
 Stable
Web Components
 Stable
Vue [Fozzie]
 N/A
React [Snacks]
 N/A
iOS JustUI [UI Kit]
 N/A
iOS PIE [SwiftUI]
 N/A
Android PIE [Compose & Views]
 N/A
Back to top