Browse Components

Cookie

A small, unobtrusive banner for optional cookie choices.

Basic

Open the banner on this page to try its real position and size. Demo choices are not saved.

View Code

HTML

<section
  class="cookie"
  id="cookie-choice"
  data-cookie
  tabindex="-1"
  aria-label="Cookie preferences"
  hidden
>
  <p>
    Necessary cookies keep this site working. Allow optional analytics cookies?
  </p>
  <div class="cookie-actions">
    <button
      class="btn secondary btn-icon"
      type="button"
      data-cookie-choice="necessary"
      aria-label="Only Necessary"
      data-tooltip="top"
      aria-describedby="cookie-necessary-tip"
    >
      <span class="icon" data-icon="close" aria-hidden="true">
      </span>
    </button>
    <span class="tooltip" id="cookie-necessary-tip" role="tooltip" popover="manual">
      Only Necessary
    </span>
    <button
      class="btn secondary btn-icon"
      type="button"
      data-cookie-choice="optional"
      aria-label="Accept Optional"
      data-tooltip="top"
      aria-describedby="cookie-optional-tip"
    >
      <span class="icon" data-icon="check" aria-hidden="true">
      </span>
    </button>
    <span class="tooltip" id="cookie-optional-tip" role="tooltip" popover="manual">
      Accept Optional
    </span>
  </div>
</section>
<button class="btn secondary" type="button" data-cookie-open="cookie-choice" hidden>
  Show Cookie Banner
</button>

Inline

Embed cookie preferences in a settings or privacy page. Reopen them at any time.

View Code

HTML

<section
  class="cookie"
  id="cookie-choice"
  data-cookie
  tabindex="-1"
  data-position="inline"
  aria-label="Cookie preferences"
  hidden
>
  <p>
    Necessary cookies keep this site working. Allow optional analytics cookies?
  </p>
  <div class="cookie-actions">
    <button
      class="btn secondary btn-icon"
      type="button"
      data-cookie-choice="necessary"
      aria-label="Only Necessary"
      data-tooltip="top"
      aria-describedby="cookie-necessary-tip"
    >
      <span class="icon" data-icon="close" aria-hidden="true">
      </span>
    </button>
    <span class="tooltip" id="cookie-necessary-tip" role="tooltip" popover="manual">
      Only Necessary
    </span>
    <button
      class="btn secondary btn-icon"
      type="button"
      data-cookie-choice="optional"
      aria-label="Accept Optional"
      data-tooltip="top"
      aria-describedby="cookie-optional-tip"
    >
      <span class="icon" data-icon="check" aria-hidden="true">
      </span>
    </button>
    <span class="tooltip" id="cookie-optional-tip" role="tooltip" popover="manual">
      Accept Optional
    </span>
  </div>
</section>
<button class="btn secondary" type="button" data-cookie-open="cookie-choice" hidden>
  Cookie Preferences
</button>

Right-to-left

Logical spacing follows the reading direction. All messages and actions can be translated.

View Code

HTML

<section
  class="cookie"
  dir="rtl"
  id="cookie-choice"
  data-cookie
  tabindex="-1"
  data-cookie-saved="ההעדפות נשמרו."
  aria-label="העדפות עוגיות"
  hidden
>
  <p>
    אנו משתמשים בעוגיות חיוניות לתפעול האתר. האם לאפשר גם עוגיות נוספות כדי להבין כיצד משתמשים בו?
  </p>
  <div class="cookie-actions">
    <button
      class="btn secondary btn-icon"
      type="button"
      data-cookie-choice="necessary"
      aria-label="חיוניות בלבד"
      data-tooltip="top"
      aria-describedby="cookie-necessary-tip"
    >
      <span class="icon" data-icon="close" aria-hidden="true">
      </span>
    </button>
    <span class="tooltip" id="cookie-necessary-tip" role="tooltip" popover="manual">
      חיוניות בלבד
    </span>
    <button
      class="btn secondary btn-icon"
      type="button"
      data-cookie-choice="optional"
      aria-label="אישור עוגיות נוספות"
      data-tooltip="top"
      aria-describedby="cookie-optional-tip"
    >
      <span class="icon" data-icon="check" aria-hidden="true">
      </span>
    </button>
    <span class="tooltip" id="cookie-optional-tip" role="tooltip" popover="manual">
      אישור עוגיות נוספות
    </span>
  </div>
</section>
<button class="btn secondary" type="button" data-cookie-open="cookie-choice" hidden>
  הצגת הודעת עוגיות
</button>

Install

Add this markup to your page. The build includes the required styles and behavior automatically.

<section
  class="cookie"
  id="cookie-choice"
  data-cookie
  tabindex="-1"
  aria-label="Cookie preferences"
  hidden
>
  <p>
    Necessary cookies keep this site working. Allow optional analytics cookies?
  </p>
  <div class="cookie-actions">
    <button
      class="btn secondary btn-icon"
      type="button"
      data-cookie-choice="necessary"
      aria-label="Only Necessary"
      data-tooltip="top"
      aria-describedby="cookie-necessary-tip"
    >
      <span class="icon" data-icon="close" aria-hidden="true">
      </span>
    </button>
    <span class="tooltip" id="cookie-necessary-tip" role="tooltip" popover="manual">
      Only Necessary
    </span>
    <button
      class="btn secondary btn-icon"
      type="button"
      data-cookie-choice="optional"
      aria-label="Accept Optional"
      data-tooltip="top"
      aria-describedby="cookie-optional-tip"
    >
      <span class="icon" data-icon="check" aria-hidden="true">
      </span>
    </button>
    <span class="tooltip" id="cookie-optional-tip" role="tooltip" popover="manual">
      Accept Optional
    </span>
  </div>
</section>
<button class="btn secondary" type="button" data-cookie-open="cookie-choice" hidden>
  Show Cookie Banner
</button>

New to Layout UI? Follow the Install Guide to set up your project.