Cookies.astro

<dialog open="" style="position: static;" class="utrecht-drawer utrecht-drawer--block-start">
  <div style="margin-block-end: var(--basis-space-block-lg, 1.5rem);">
    <a href="#" class="utrecht-link utrecht-link--html-a" style="display: inline-block; text-decoration: none;">
      <img
        src="https://clippy-storybook-nl-design-system.vercel.app/assets/logo-CqnJ_--U.svg"
        alt="Organisatie logo"
        style="inline-size: auto; max-block-size: 50px;"
      />
    </a>
  </div>

  <h2
    class="nl-heading nl-heading--level-2"
    id="cookie-consent-title"
    style="margin-block-end: var(--basis-space-block-lg, 1.5rem);"
  >
    Cookies op de website van [Organisatie]
  </h2>

  <div style="margin-block-end: var(--basis-space-block-xl, 2rem); max-block-size: 200px; overflow-block: auto;">
    <p style="margin-block-end: var(--basis-space-block-md, 1rem);" class="utrecht-paragraph">
      We gebruiken enkele essentiële cookies om deze website goed te laten werken. We willen graag aanvullende cookies
      plaatsen om te begrijpen hoe je deze website gebruikt en onze diensten te verbeteren.
    </p>
  </div>

  <form method="dialog">
    <p role="group" style="margin-block-start: var(--basis-space-block-xl, 2rem);" class="utrecht-button-group">
      <button type="submit" class="nl-button nl-button--secondary" value="accept">
        Alle cookies accepteren
      </button>

      <button type="submit" class="nl-button nl-button--secondary" value="reject">
        Cookies weigeren
      </button>
      <a href="#" class="utrecht-link utrecht-link--html-a"> Zelf instellen </a>
    </p>
  </form>
</dialog>