Cookie Banner

GDPR consent component — fixed bottom banner or popup card, with full acceptance, per-category customisation, and rejection options, compliant with EU Regulation 2016/679

The Cookie Banner is a mandatory component for any site that processes user data within the EU. It gives users explicit control over cookie categories (necessary, analytical, marketing) through a clear and non-deceptive interface — compliant with GDPR requirements and the ePrivacy Directive. Three formats are available: Full-width banner (fixed at page bottom, Light / Dark / Blue variants) recommended for first-visit; Compact bar for re-consent or secondary pages; Popup card (bottom-right) with category toggles for maximum granularity. All variants include links to the Privacy Policy and Cookie Policy.

Variant 1 — Light Banner (recommended)

Variant 2 — Dark Banner

Variant 3 — Blue Banner (brand)

Variant 4 — Compact Bar

Variant 5 — Popup Card with categories (bottom-right)

Floating card format with granular toggles per cookie category. Recommended when local regulations require explicit consent for each category.

GDPR compliance notes

Under EU Regulation 2016/679 and the ePrivacy Directive, the cookie banner must meet the following requirements: consent must be freely given, specific, informed, and unambiguous; declining must be as easy as accepting (the “Decline” button must be clearly visible, not hidden); necessary cookies do not require consent; consent must be recorded with a timestamp and policy version; the user must be able to withdraw consent at any time from the site settings.

Implementation

The banner is placed directly before </body> with position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999. On clicking "Accept all" or "Decline", a consent cookie is set (e.g. gls_cookie_consent=accepted) expiring in 12 months, and the banner is hidden by adding the .hidden class. On page load, the existence of this cookie is checked — if present, the banner is not shown. Server-side consent logging is recommended for GDPR audit purposes.

Components used

• .cookie-banner — Full-width banner; modifiers: .cb-dark, .cb-blue, .cb-compact
• .cookie-inner — Centred container max 1200px
• .cookie-icon — Decorative cookie icon
• .cookie-text — Title + description block with links to policies
• .cookie-actions — Button group: .btn-cookie-reject, .btn-cookie-settings, .btn-cookie-accept
• .cookie-popup — Floating card with gradient header + per-category toggles
• .cookie-toggle-row / .toggle-switch — Toggle row with states: default, .on, .locked (required)