<div class="modal-wrapper js-modal" id="cookie-modal-example">
    <div class="modal modal--cookie-modal modal--mobile-overlay">
        <div class="modal__inner">
            <button class="modal__close js-modal-close-button">
        <svg class="icon icon--close">
  <use xlink:href="/assets/icons/icons.svg#close"></use>
</svg>

      </button>
            <div class="modal__content">
                This site uses cookies to give you the best experience of our site. Cookies can be disabled in your browser settings, but some features may not work as intended. By continuing without disabling cookies, you agree to our use of cookies. If you would like
                to learn more, please <a href="#">review our cookie policy</a>.
            </div>
        </div>
    </div>
</div>
<div class="modal-wrapper js-modal" id="{{id}}">
  <div class="modal modal--cookie-modal modal--mobile-overlay">
    <div class="modal__inner">
      <button class="modal__close js-modal-close-button">
        {{render '@icons--close'}}
      </button>
      <div class="modal__content">
        {{#if value}}
        {{{value}}}
        {{/if}}
      </div>
    </div>
  </div>
</div>
{
  "modal": true,
  "id": "cookie-modal-example",
  "value": "This site uses cookies to give you the best experience of our site. Cookies can be disabled in your browser settings, but some features may not work as intended. By continuing without disabling cookies, you agree to our use of cookies. If you would like to learn more, please <a href=\"#\">review our cookie policy</a>."
}
  • Content:
    #cookie-modal-example {
      position: fixed;
      top: unset;
      right: 0;
      bottom: 0;
      left: 0;
      height: auto;
    
      & > {
        position: static;
      }
    }
    
    .modal.modal--cookie-modal {
      box-shadow: -10px 0 10px 0 rgba(0, 0, 0, .1);
    
      .modal__inner {
        padding-bottom: 0;
      }
    
      .modal__content {
        padding: 20px 50px 20px 20px;
        font-size: 1.4rem;
        line-height: 1.9rem;
    
        a {
          transition: color $transition-standard;
          color: $color-primary;
          text-decoration: none;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        position: fixed;
        top: auto;
        width: 100%;
    
        .modal__inner {
          width: 100%;
          max-width: none;
        }
      }
    }
    
  • URL: /components/raw/cookie-modal/cookie-modal.scss
  • Filesystem Path: src/components/01-elements/modals/cookie-modal/cookie-modal.scss
  • Size: 665 Bytes

There are no notes for this item.