Style Guide

Legal Disclaimer 

<div class="legal-wrap bg-white">
    <div class="container">
        <div class="legalContain-wraper">
            <div class="title-warp">
                <h2 class="title"> Important Legal Information</h2>
                <h1 class="main-title">Welcome at BlueBox</h1>
                <p class="desc-text">The information on this website is for the exclusive use of professional clients within the meaning of Directive 2014/65/EU of the European Parliament and of the Council of 15 May 2014 on markets in financial instruments ("Professional Clients"). By clicking the accept button you acknowledge that you are a Professional Client in accordance with the law of your country of domicile.</p>
            </div>

            <div class="country-warper countryAreaWraper">
                <p class="country-text">Please select your country:</p>

                <div class="country-list">
                    <a class="country-name">
                        <div class="country-name-img">
                            <span>
                                <img src="/images/luxemborg.svg" alt="flag" />
                            </span>
                            Luxembourg
                        </div>
                        <span class="inst_name">Professional/Institutional investors</span>
                    </a>
                    <a class="country-name">
                        <div class="country-name-img">
                            <span>
                                <img src="/images/spain.svg" alt="flag" />
                            </span>
                            Spain
                        </div>
                        <span class="inst_name">Professional/Institutional investors</span>
                    </a>
                    <a class="country-name">
                        <div class="country-name-img">
                            <span>
                                <img src="/images/switzerland.svg" alt="flag" />
                            </span>
                            Switzerland
                        </div>
                        <span class="inst_name">Professional/Institutional investors</span>
                    </a>
                    <a class="country-name">
                        <div class="country-name-img">
                            <span>
                                <img src="/images/united-kingdom.svg" alt="flag" />
                            </span>
                            United Kingdom
                        </div>
                        <span class="inst_name">Professional/Institutional investors</span>
                    </a>
                    <a class="country-name">
                        <div class="country-name-img">
                            <span>
                                <img src="/images/others.svg" alt="flag" />
                            </span>
                            Other
                        </div>
                        <span class="inst_name">Professional/Institutional investors</span>
                    </a>
                </div>

            </div>

            <div class="country-warper investor_wraper">
                <p class="country-text">Please select your investor group</p>

                <div class="country-list">
                    <a class="country-name">
                        <div class="country-name-img">
                            <span>
                                <img src="/images/retail-investor-active.svg" alt="flag" />
                            </span>
                            Retail investor
                        </div>
                    </a>
                    <a class="country-name">
                        <div class="country-name-img">
                            <span>
                                <img src="/images/institutional-investor-active.svg" alt="flag" />
                            </span>
                            Professionell/institutional investor
                        </div>
                    </a>
                </div>

                <a class="btn btn-outline-secondary btnShowHide" href="#"> Continue </a>

            </div>
        </div>
    </div>
 
<div class="legal-wrap {{ bgGrey ? 'bg-grey' : 'bg-white' }}">
  <div class="container">
    <div class="legalContain-wraper">
      <div class="title-warp">
        <h2 class="title"> {{title}}</h2>
        <h1 class="main-title">{{mainTitle}}</h1>
        <p class="desc-text">{{ desc }}</p>
      </div>

      <div class="country-warper countryAreaWraper">
        <p class="country-text">{{ countrytext }}</p>

        <div class="country-list">
          {% for item in countryItems %}
            <a class="country-name">
              <div class="country-name-img">
                <span>
                  <img src="{{item.img}}" alt="flag"/>
                </span>
                {{item.name}}
              </div>
              <span class="inst_name">{{item.subText}}</span>
            </a>
          {% endfor %}
        </div>

      </div>

      <div class="country-warper investor_wraper">
        <p class="country-text">{{ investorText }}</p>

        <div class="country-list">
          {% for item in investorItems %}
            <a class="country-name">
             <div class="country-name-img">
                <span>
                  <img src="{{item.img}}" alt="flag"/>
                </span>
                {{item.name}}
              </div>
            </a>
          {% endfor %}
      </div>

      <a class="btn btn-outline-secondary btnShowHide" href="{{btn_link}}"> {{btnText}} </a>

    </div>
  </div>
</div>
 
{
  "bgGrey": false,
  "title": "Important Legal Information",
  "mainTitle": "Welcome at BlueBox",
  "desc": "The information on this website is for the exclusive use of professional clients within the meaning of Directive 2014/65/EU of the European Parliament and of the Council of 15 May 2014 on markets in financial instruments (\"Professional Clients\"). By clicking the accept button you acknowledge that you are a Professional Client in accordance with the law of your country of domicile.",
  "btnText": "Continue",
  "btn_link": "#",
  "countrytext": "Please select your country:",
  "countryItems": [
    {
      "item": null,
      "name": "Luxembourg",
      "img": "/images/luxemborg.svg",
      "subText": "Professional/Institutional investors"
    },
    {
      "item": null,
      "name": "Spain",
      "img": "/images/spain.svg",
      "subText": "Professional/Institutional investors"
    },
    {
      "item": null,
      "name": "Switzerland",
      "img": "/images/switzerland.svg",
      "subText": "Professional/Institutional investors"
    },
    {
      "item": null,
      "name": "United Kingdom",
      "img": "/images/united-kingdom.svg",
      "subText": "Professional/Institutional investors"
    },
    {
      "item": null,
      "name": "Other",
      "img": "/images/others.svg",
      "subText": "Professional/Institutional investors"
    }
  ],
  "investorText": "Please select your investor group",
  "investorItems": [
    {
      "item": null,
      "name": "Retail investor",
      "img": "/images/retail-investor-active.svg"
    },
    {
      "item": null,
      "name": "Professionell/institutional investor",
      "img": "/images/institutional-investor-active.svg"
    }
  ]
}
  • Content: 
    import $ from "jquery";

$(document).ready(function () {
  $(".country-name").click(function () {
    $(".country-name").removeClass("active");
    $(this).addClass("active");
  });

  $('.btnShowHide').click(function () {
    $('.countryAreaWraper').show("fast");
    $('.investor_wraper').hide("fast");
  });

});
  • URL: /components/raw/legal_disclaimer/legal_disclaimer.js
  • Filesystem Path: components/03-components/legal_disclaimer/legal_disclaimer.js
  • Size: 316 Bytes
  • Content: 
    .legal-wrap {
  padding: 140px 0;
  // @include media-breakpoint-down(lg) {
  //   padding: 80px 0;
  // }
  .container {
    max-width: 1030px;
    padding: 0 15px;
    .legalContain-wraper {
      max-width: 665px;
      .title-warp {
        padding-bottom: 40px;
        @include media-breakpoint-down(lg) {
          padding-bottom: 30px;
        }
        .title {
          font-size: 17px;
          font-family: "OpenSans_light";
          line-height: 23px;
          color: #120f29;
        }
        .main-title {
          font-size: 60px;
          font-family: "PlayfairDisplay-Bold";
          color: #120f29;
          margin-bottom: 25px;
          @include media-breakpoint-down(lg) {
            font-size: 40px;
          }
        }
        .desc-text {
          line-height: 29px;
        }
      }
      .country-warper {
        .country-list {
          display: flex;
          flex-direction: column;
          padding-top: 30px;
          .country-name {
            color: #120f29;
            font-size: 17px;
            font-family: "OpenSans-Regular";
            line-height: 29px;
            text-decoration: none;
            opacity: 0.3;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 9px 10px;
            margin-bottom: 17px;
            transition: all 0.15s ease-in-out;
            cursor: pointer;
            @include media-breakpoint-down(md) {
              flex-direction: column;
              align-items: flex-start;
            }
            &.active,
            &:hover {
              font-family: "OpenSans-SemiBold";
              opacity: 1;
              background-color: rgba(41, 35, 92, 0.04);
              .inst_name {
                display: block;
              }
            }
            span {
              padding-right: 12px;
              img {
                max-width: 100%;
                height: 22px;
              }
            }
            .inst_name {
              font-size: 13px;
              color: #120f29;
              opacity: 0.5;
              display: none;
              padding-right: 0;
              @include media-breakpoint-down(md) {
                padding-left: 50px;
              }
            }
            .country-name-img {
              display: flex;
              align-items: center;
            }
          }
        }
      }
      .btn-outline-secondary {
        font-size: 16px;
        width: 260px;
        margin-top: 40px;
        @include media-breakpoint-down(md) {
          width: 100%;
        }
      }

      .countryAreaWraper {
        display: none;
      }
    }
  }
}
  • URL: /components/raw/legal_disclaimer/legal_disclaimer.scss
  • Filesystem Path: components/03-components/legal_disclaimer/legal_disclaimer.scss
  • Size: 2.7 KB
  • Handle: @legal_disclaimer
  • Preview:
  • Filesystem Path: components/03-components/legal_disclaimer/legal_disclaimer.twig

There are no notes for this item.