6 cookie-banner design examples that fit the website

A good cookie-banner design gives people understandable choices, works on a small screen and leaves a clear route back to preferences. The examples below change the presentation while keeping those jobs intact. They are original layout concepts, not screenshots of customer websites or tested conversion winners.

1. The independent shop: a compact bottom card

Use a white card with a thin border and enough separation from the page behind it. Keep the explanation short, then place the main choices together. On mobile, allow the buttons to stack at equal width.

This works well when product photography already carries the visual personality. The banner does not need another large image competing for attention.

Check one thing before launch: does the card cover “Add to basket”, the basket total or a floating support button? Test an actual product page, not an empty design canvas.

2. The B2B service site: a quiet inline-style panel

Use the site's body typeface and a restrained accent. Explain analytics and advertising in the same plain language you would use in a sales conversation.

For a lead-generation site, the practical test is whether someone can still understand the offer and reach the form. Avoid a large panel that covers the page headline while leaving little space for the consent explanation itself.

3. The creative agency: expressive frame, neutral choices

A colourful website can still have a calm consent interface. Put the personality in the card background, border or heading treatment. Keep action labels straightforward and all options legible.

The useful design constraint is to make every choice feel intentional. Do not use a confident brand colour for acceptance and a barely visible treatment for refusal. Our dark-pattern review covers the traps to avoid.

4. The publisher: room for detail without a wall of text

Publishers can have more complex vendor and purpose information. Let the first layer establish the decision clearly, with an accessible route to the details that apply to the implementation.

Do not shrink the type to fit a long vendor explanation into a tiny card. Allow the preference view to do its job. If you use a framework such as IAB TCF, required text and controls constrain the design; confirm those requirements before styling.

5. The mobile-first business: stacked actions and visible focus

Design at the smallest screen you support first. Give controls breathing room, and check that zooming does not hide the final action below an inaccessible edge.

Use the W3C guidance on minimum target size when assessing touch controls. Also test keyboard navigation. A visitor should be able to see where focus is and activate the intended choice without a mouse.

Do not interpret a visually clean mock-up as an accessibility certification. The working page is what needs testing.

6. The international site: a layout that survives translation

Short English labels can become longer in another language. Leave flexible space rather than setting a narrow fixed width around the original text.

Preview the full panel in each supported language, including purpose descriptions, settings and policy links. A translated headline above untranslated controls gives visitors an incomplete experience.

Language and geography solve different problems. A German-language visitor is not automatically in Germany, and a US visitor may prefer Spanish. Keep language selection separate from the regional consent setup.

A design review you can finish in one sitting

• Read every label on a phone without zooming.
• Compare the visibility of acceptance and rejection.
• Check text against the W3C contrast guidance.
• Complete the preference journey using only the keyboard.
• Reopen settings after the banner closes.
• Confirm the site's important controls remain usable.

Then ask someone who did not design the banner to explain what each choice means. That conversation often reveals more than another round of colour adjustments.