Style Guide

Pop Up Banner For Cookies 

<div class="coocies_wraper">
    <div class="coocies_wrap">

        <a class="close"> <img src="/images/close_small.svg" alt="close" /> </a>

        <div class="coocies_contain">
            <div class="text-warp">
                <h3 class="title">Cookie policy</h3>
                <div class="desc">
                    <p>We use third-party <span> cookies </span> in order to personalize your site experience.</p>
                </div>
            </div>

            <div class="btn-group">
                <a class="btn btn-outline-secondary btn-accept" href="#"> Allow </a>
                <a class="btn btn-link ms-4 btn-decline" href="#">Decline</a>
            </div>

        </div>
    </div>
</div>
 
<div class="coocies_wraper">
  <div class="coocies_wrap">

    <a class="close"> <img src="{{imgSrc}}" alt="close" /> </a>

    <div class="coocies_contain">
      <div class="text-warp">
        <h3 class="title">{{mainTitle}}</h3>
        <div class="desc">
          {{desc}}
        </div>
      </div>

      {% if btnAllow is not null or btnDecline is not null %}
      <div class="btn-group">
        {% if btnAllow is not null %}
          <a class="btn btn-outline-secondary btn-accept" href="{{btn_allow}}"> {{btnAllow}} </a>
        {% endif %}
        {% if btnDecline is not null %}
          <a class="btn btn-link ms-4 btn-decline" href="{{btn_decline}}">{{ btnDecline}}</a>
        {% endif %}
      </div>
      {% endif %}

    </div>
  </div>
</div>
 
{
  "bgGrey": false,
  "imgSrc": "/images/close_small.svg",
  "mainTitle": "Cookie policy",
  "desc": "<p>We use third-party <span> cookies </span> in order to personalize your site experience.</p>",
  "btnAllow": "Allow",
  "btn_allow": "#",
  "btnDecline": "Decline",
  "btn_decline": "#"
}
  • Content: 
    import $ from "jquery";

$(document).ready(function () {

  $(".coocies_wraper .close,.coocies_wraper .btn-decline").click(function(){
    $(".coocies_wrap").hide();
  });

});
  • URL: /components/raw/pop_up_banner_for_cookies/pop_up_banner_for_cookies.js
  • Filesystem Path: components/03-components/pop_up_banner_for_cookies/pop_up_banner_for_cookies.js
  • Size: 177 Bytes
  • Content: 
    .coocies_wraper {
  .coocies_wrap {
    background-color: #f2f2f2;
    padding: 50px;
    max-width: 720px;
    position: fixed;
    z-index: 2;
    right: 0;
    bottom: 0;
    @include media-breakpoint-down(md) {
      width: 100%;
      padding: 30px;
    }
    .close {
      position: absolute;
      right: 15px;
      top: 15px;
      cursor: pointer;
      img {
        width: 30px;
        height: 30px;
      }
    }
    .coocies_contain {
      display: flex;
      align-items: center;
      justify-content: space-between;
      @include media-breakpoint-down(md) {
        display: block;
      }
      .text-warp {
        .title {
          color: $black;
          font-size: 18px;
          font-family: "PlayfairDisplay-Bold";
          line-height: 30px;
          margin-bottom: 10px;
        }
        .desc {
          p {
            color: $black;
            font-size: 14px;
            line-height: 22px;
            max-width: 270px;

            span {
              cursor: pointer;
              position: relative;

              &:hover {
                color: $secondary;

                &::after {
                  background-color: $secondary;
                }
              }

              &::after {
                content: "";
                position: absolute;
                bottom: 0;
                left: 0;
                height: 1px;
                width: 50px;
                background-color: $black;
              }
            }
          }
        }
      }
      .btn-group {
        align-items: center;
        margin-left: 30px;
        @include media-breakpoint-down(md) {
          margin-left: 0;
          margin-top: 25px;
        }
        .btn-link {
          font-size: 15px;
        }
      }
    }
  }
}
  • URL: /components/raw/pop_up_banner_for_cookies/pop_up_banner_for_cookies.scss
  • Filesystem Path: components/03-components/pop_up_banner_for_cookies/pop_up_banner_for_cookies.scss
  • Size: 1.8 KB
  • Handle: @pop_up_banner_for_cookies
  • Preview:
  • Filesystem Path: components/03-components/pop_up_banner_for_cookies/pop_up_banner_for_cookies.twig

There are no notes for this item.