## Cookie Consent

Cookie consent banners for GDPR compliance and user privacy preferences.

### Basic Cookie Banner

We use cookies to enhance your browsing experience. By continuing to use this site, you agree to our use of cookies.

HTML

    <div
                class="cookie-banner"
                style="
                    padding: 16px 24px;
                    background: var(--color_fill_secondary);
                    border-radius: 8px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    flex-wrap: wrap;
                    gap: 16px;
                "
            >
                <p style="margin: 0; flex: 1; min-width: 200px">
                    We use cookies to enhance your browsing experience. By
                    continuing to use this site, you agree to our use of cookies.
                </p>
                <div style="display: flex; gap: 8px">
                    <button class="button button--secondary">Decline</button>
                    <button class="button button--primary">Accept All</button>
                </div>
            </div>

### Cookie Banner with Preferences

#### 🍪 Cookie Settings

We use cookies to improve your experience. Customize your preferences below.

Essential Cookies (Required) Analytics Cookies Marketing Cookies
HTML

    <div
                class="cookie-banner"
                style="
                    padding: 20px 24px;
                    background: var(--color_fill_secondary);
                    border-radius: 12px;
                "
            >
                <div style="margin-bottom: 16px">
                    <h4 style="margin: 0 0 8px">🍪 Cookie Settings</h4>
                    <p style="margin: 0; opacity: 0.8">
                        We use cookies to improve your experience. Customize your
                        preferences below.
                    </p>
                </div>
                <div
                    style="
                        display: flex;
                        flex-direction: column;
                        gap: 8px;
                        margin-bottom: 16px;
                    "
                >
                    <label style="display: flex; align-items: center; gap: 8px">
                        <input type="checkbox" checked disabled />
                        <span>Essential Cookies</span>
                        <small style="opacity: 0.6">(Required)</small>
                    </label>
                    <label style="display: flex; align-items: center; gap: 8px">
                        <input type="checkbox" checked />
                        <span>Analytics Cookies</span>
                    </label>
                    <label style="display: flex; align-items: center; gap: 8px">
                        <input type="checkbox" />
                        <span>Marketing Cookies</span>
                    </label>
                </div>
                <div style="display: flex; gap: 8px">
                    <button class="button button--primary">
                        Save Preferences
                    </button>
                    <button class="button button--secondary">Accept All</button>
                </div>
            </div>

### Compact Cookie Banner

🍪 This site uses cookies. Learn more
HTML

    <div
                class="cookie-banner cookie-banner--compact"
                style="
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 12px 24px;
                    background: var(--color_fill_secondary);
                    border-radius: 8px;
                "
            >
                <span>
                    🍪 This site uses cookies.
                    <a href="#">Learn more</a>
                </span>
                <div style="display: flex; gap: 8px">
                    <button class="button button--small button--secondary">
                        Decline
                    </button>
                    <button class="button button--small button--primary">
                        Accept
                    </button>
                </div>
            </div>

### Cookie Modal

### Privacy Preferences

We may store or retrieve information on your browser, mostly in the form of cookies.

Strictly Necessary Always Active
Required for the website to function properly.
Performance Cookies
Help us understand how visitors interact with the website.
Targeting Cookies
Used to deliver personalized advertisements.
HTML

    <div
                class="cookie-modal"
                style="
                    max-width: 500px;
                    padding: 24px;
                    background: var(--color_fill_primary);
                    border: 1px solid var(--color_line_secondary);
                    border-radius: 12px;
                    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.1);
                "
            >
                <h3 style="margin: 0 0 16px">Privacy Preferences</h3>
                <p style="margin-bottom: 20px; opacity: 0.8">
                    We may store or retrieve information on your browser, mostly in
                    the form of cookies.
                </p>

                <div
                    style="
                        display: flex;
                        flex-direction: column;
                        gap: 12px;
                        margin-bottom: 20px;
                    "
                >
                    <div
                        style="
                            padding: 12px;
                            background: var(--color_fill_secondary);
                            border-radius: 8px;
                        "
                    >
                        <div
                            style="
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                            "
                        >
                            <strong>Strictly Necessary</strong>
                            <span class="badge badge--success">Always Active</span>
                        </div>
                        <small style="opacity: 0.7">
                            Required for the website to function properly.
                        </small>
                    </div>

                    <div
                        style="
                            padding: 12px;
                            background: var(--color_fill_secondary);
                            border-radius: 8px;
                        "
                    >
                        <div
                            style="
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-bottom: 4px;
                            "
                        >
                            <strong>Performance Cookies</strong>
                            <input type="checkbox" checked />
                        </div>
                        <small style="opacity: 0.7">
                            Help us understand how visitors interact with the
                            website.
                        </small>
                    </div>

                    <div
                        style="
                            padding: 12px;
                            background: var(--color_fill_secondary);
                            border-radius: 8px;
                        "
                    >
                        <div
                            style="
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                margin-bottom: 4px;
                            "
                        >
                            <strong>Targeting Cookies</strong>
                            <input type="checkbox" />
                        </div>
                        <small style="opacity: 0.7">
                            Used to deliver personalized advertisements.
                        </small>
                    </div>
                </div>

                <div style="display: flex; gap: 12px">
                    <button class="button button--secondary" style="flex: 1">
                        Reject All
                    </button>
                    <button class="button button--primary" style="flex: 1">
                        Accept All
                    </button>
                </div>
            </div>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!