R A D I U S

Cookie Statement

Use to notify first-time users about our cookies policy and allow the option to read more about this policy as per the current EU "Cookie Law" requirements.

Description

Cookie statement is designed to be used as a stand alone section, that appears fixed at the bottom of the viewport and remains fixed to the bottom of the viewport as the user scrolls.

Until users provide consent by selecting the 'Accept and dismiss` CTA. The javascript is triggered by the addition of the attribute [data-js-cookie-statement]. In order to deal with different countries (folders) on the same domain we need to add the attribute [data-js-cookie-statement-path="/"] in order to separate cookies for different folders on the same URL.

Activate Sass component

In order to have the styling of this component available, you need to include it in your project. After including the Radius library in your main ./index.scss file, add this snippet:

@include radius-component-cookie-statement;

Import JS functionality

In order to have the JS functionality of this component available, you need to include it in your project. Assuming the project is using ES6:

import cookie-statement from 'radius/dist/m2dm/js/cookie-statement';
cookieStatement();



            
              Link to Abstract/Sketch file

              Download Sketch / Abstract file
            

            
              Subcategories

              
                
                  Javascript
                
              
            
          
              Usage
                
                  Usage example

                     
    
  
    Cookies help us deliver our services. By using our services, you agree to our policy.
    
  

  

  

    Code example
    <div class="cookie-statement" data-js-cookie-statement data-js-cookie-statement-path="/">
  <div class="cookie-statement__wrapper">
    <p class="cookie-statement__content u-mb-none"><a class="cta-link--inverse" href="/about-us/cookie-policy">Cookies</a> help us deliver our services. By using our services, you agree to our <a class="cta-link--inverse" href="/about-us/cookie-policy">policy</a>.</p>
    <button aria-label="close" class="control-icon control-button--enlarged"  data-js-cookie-statement-cta>
      <svg class="svg-icon svg-icon--inverse">
        <use xlink:href="/m2dm-public/assets/icons/svg-sprite.svg#cross-circle-outline"></use>
      </svg>
    </button>
  </div>
</div>