{/* This file is NOT rendered directly. Sections are imported by framework pages. */}

<section id="content">
  ## Prefer Slots for Stock Components

  There is no single top-level `className` contract across every pre-built consent component.

  For the stock `ConsentBanner`, `ConsentDialog`, and `ConsentWidget`, prefer `theme.slots` first. That keeps the markup intact and lets you target the exact part you need.

  ## Per-Slot className

  Target individual component parts via the theme's `slots` object. Each slot accepts a string (className) or an object with `className` and `style`:

  ```tsx
  const theme = {
    slots: {
      consentBannerTitle: 'text-xl font-semibold',
      consentBannerDescription: 'text-sm text-gray-600',
      consentBannerFooter: 'flex gap-3',
      buttonPrimary: 'rounded-full px-6',
    },
  } satisfies Theme;
  ```

  ## Combining with CSS Modules

  ```tsx
  import styles from './consent.module.css';

  const theme = {
    slots: {
      consentBannerCard: styles.bannerCard,
      consentBannerTitle: styles.bannerTitle,
      buttonPrimary: styles.primaryButton,
    },
  } satisfies Theme;
  ```

  ```css title="consent.module.css"
  .bannerCard {
    backdrop-filter: blur(12px);
    background: rgba(255, 255, 255, 0.9);
  }

  .bannerTitle {
    font-size: 1.25rem;
    font-weight: 700;
  }

  .primaryButton {
    border-radius: 9999px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
  }
  ```

  ## When to Use Raw className

  Use raw className-level styling when:

  * your styling system is already class-driven
  * tokens are too broad for the change
  * slots already identify the correct element

  If the request is "make the banner footer darker", prefer `theme.colors.surfaceHover` first. If the request is "add a border and spacing only to the footer", prefer `theme.slots.consentBannerFooter`.

  ## Advanced: `noStyle`

  Use `noStyle` only when you want to remove defaults and style from scratch while still keeping c15t's component structure:

  ```tsx
  {/* Remove all styles from a specific component */}
  <ConsentBanner noStyle />

  {/* Remove all styles globally */}
  <ConsentManagerProvider options={{ noStyle: true, ... }}>
  ```

  You can also set `noStyle` per-slot:

  ```tsx
  const theme = {
    slots: {
      consentBannerCard: { noStyle: true, className: 'my-custom-card' },
    },
  } satisfies Theme;
  ```

  Treat `noStyle` as an advanced escape hatch. Do not jump to it just because a token or slot needs debugging.

  For full custom markup and behavior, continue to [Headless Mode](../headless).
</section>