Download Element New

Ready

HTML
View
Context
Assets
Info
Notes


        
        <div class="download-element_new bg-white">
    <div class="container">
        <div class="title-warp">
            <h2 class="title">
                BlueBox Investment Strategy</h2>
            <h1 class="main-title">Funds Documents</h1>
            <p class="descWrap">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.</p>
            <a class="btn btn-outline-secondary mt-4 download-with-popup" href="#">
                Download Factsheet
            </a>
        </div>

        <div class="downTabs_wrap">

            <ul class="nav nav-pills mb-3 tab-slider" id="pills-tab" role="tablist">
                <li class="nav-item" role="presentation">
                    <button class="nav-link active" id="pills-1-tab" data-bs-toggle="pill" data-bs-target="#pills-1" type="button" role="tab" aria-controls="pills-1" aria-selected="true">

                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-2-tab" data-bs-toggle="pill" data-bs-target="#pills-2" type="button" role="tab" aria-controls="pills-2" aria-selected="true">

                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-3-tab" data-bs-toggle="pill" data-bs-target="#pills-3" type="button" role="tab" aria-controls="pills-3" aria-selected="true">

                    </button>
                </li>
                <li class="nav-item" role="presentation">
                    <button class="nav-link" id="pills-4-tab" data-bs-toggle="pill" data-bs-target="#pills-4" type="button" role="tab" aria-controls="pills-4" aria-selected="true">

                    </button>
                </li>
            </ul>
            <div class="tab-content" id="pills-tabContent">
                <div class="tab-pane fade show active" id="pills-1" role="tabpanel" aria-labelledby="pills-1-tab" tabindex="0">
                    <div class="down_item_wrap">
                    </div>
                </div>
                <div class="tab-pane fade" id="pills-2" role="tabpanel" aria-labelledby="pills-2-tab" tabindex="0">
                    <div class="down_item_wrap">
                    </div>
                </div>
                <div class="tab-pane fade" id="pills-3" role="tabpanel" aria-labelledby="pills-3-tab" tabindex="0">
                    <div class="down_item_wrap">
                    </div>
                </div>
                <div class="tab-pane fade" id="pills-4" role="tabpanel" aria-labelledby="pills-4-tab" tabindex="0">
                    <div class="down_item_wrap">
                    </div>
                </div>
            </div>

        </div>

    </div>
</div>


        <div class="download-element_new {{ bgGrey ? 'bg-grey' : 'bg-white' }}{% if paragraph_id %} download-element-new-{{ paragraph_id }}{% endif %}"{% if paragraph_id %} data-paragraph-id="{{ paragraph_id }}"{% endif %}>
	<div class="container">
		<div class="title-warp">
			<h2 class="title">
				{{subTitle}}</h2>
			<h1 class="main-title">{{mainTitle}}</h1>
			<p class="descWrap">{{desc}}</p>
      {% if btn_link is not empty and btn_text is not empty %}
        <a class="btn btn-outline-secondary mt-4 download-with-popup" href="{{btn_link}}">
          {{btn_text}}
        </a>
      {% endif  %}
		</div>


		<div class="downTabs_wrap">

			<ul class="nav nav-pills mb-3 tab-slider" id="pills-tab" role="tablist">
        {% for tab in tabs %}
          <li class="nav-item" role="presentation">
            <button class="nav-link{% if loop.index0 == selected_tab %} active{% endif %}" id="pills-{{ loop.index }}-tab" data-bs-toggle="pill" data-bs-target="#pills-{{ loop.index }}" type="button" role="tab" aria-controls="pills-{{ loop.index }}" aria-selected="true">
              {{ tab.title }}
            </button>
          </li>
        {% endfor %}
      </ul>
      <div class="tab-content" id="pills-tabContent">
        {% for tab in tabs %}
          <div class="tab-pane fade{% if loop.index0 == selected_tab %} show active{% endif %}" id="pills-{{ loop.index }}" role="tabpanel" aria-labelledby="pills-{{ loop.index }}-tab" tabindex="0">
            {% if tab.class_filter is not empty or tab.link is not empty %}
              <div class="tabFiter_area">
                {% if tab.link is not empty %}
                  <a href="{{ tab.link.url }}" class="title">{{ tab.link.title }}</a>
                {% else %}
                  <span></span>
                {% endif %}
                {% if tab.class_filter %}
                  <div class="filter_wrap">
                    <select class="filter-options select">
                      {% for class_id, class_label in tab.class_filter.options %}
                        <option value="{{ class_id }}"{% if class_id == tab.class_filter.selected %} selected="selected"{% endif %}>{{ class_label }}</option>
                      {% endfor %}
                    </select>
                  </div>
                {% endif %}
              </div>
            {% endif %}
            <div class="down_item_wrap">
              {% for item in tab.items %}
                <div class="down_item">
                  <a class="down_items" href="{{item.link}}" target="_blank">
                    <div class="title_wrap">
                      <h4 class="title">{{item.title}}
                      </h4>
                      <span>{{item.desc}}</span>
                    </div>
                    <div class="downLink">
                      <span class="links arrow_link"></span>
                    </div>
                  </a>
                </div>
              {% endfor %}
              {% if ( tab.items | length > 5 ) %}
                <a class="show-more-down btn-link">{{btnText}}</a>
              {% endif %}
            </div>
          </div>
        {% endfor %}
      </div>

		</div>


	</div>
</div>


        
            
            {
  "bgGrey": false,
  "subTitle": "BlueBox Investment Strategy",
  "mainTitle": "Funds Documents",
  "desc": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua.",
  "btn_text": "Download Factsheet",
  "btn_link": "#",
  "btnText": "Load more Documents",
  "paragraph_id": null,
  "selected_tab": 0,
  "tabs": [
    {
      "tab": {
        "title": "Account Opening Documents and Fund Information",
        "class_filter": null,
        "link": null,
        "items": [
          {
            "item": null,
            "title": "BBF 2021 Audited Financial Statement",
            "link": "#",
            "desc": "S (USD) ACC"
          },
          {
            "item": null,
            "title": "BBF 2021 Audited Financial Statement",
            "link": "#",
            "desc": "I (USD) ACC"
          },
          {
            "item": null,
            "title": "BBF 2021 Audited Financial Statement",
            "link": "#",
            "desc": "S (USD) ACC"
          },
          {
            "item": null,
            "title": "BBF 2021 Audited Financial Statement",
            "link": "#",
            "desc": "I (USD) ACC"
          },
          {
            "item": null,
            "title": "BBF 2021 Audited Financial Statement",
            "link": "#",
            "desc": "S (USD) ACC"
          },
          {
            "item": null,
            "title": "BBF 2021 Audited Financial Statement",
            "link": "#",
            "desc": "I (USD) ACC"
          },
          {
            "item": null,
            "title": "BBF 2021 Audited Financial Statement",
            "link": "#",
            "desc": "S (USD) ACC"
          }
        ]
      }
    },
    {
      "tab": {
        "title": "KIIDs",
        "class_filter": {
          "options": {
            "1": "I Class",
            "2": "S Class",
            "3": "A Class"
          },
          "selected": 1
        },
        "link": {
          "title": "This is an external link",
          "url": "#"
        },
        "items": [
          {
            "item": null,
            "title": "BBF 2021 Audited Financial Statement",
            "link": "#",
            "desc": "S (USD) ACC"
          },
          {
            "item": null,
            "title": "BBF 2021 Audited Financial Statement",
            "link": "#",
            "desc": "I (USD) ACC"
          },
          {
            "item": null,
            "title": "BBF 2021 Audited Financial Statement",
            "link": "#",
            "desc": "S (USD) ACC"
          }
        ]
      }
    },
    {
      "tab": {
        "title": "Ad-Hoc comments",
        "class_filter": null,
        "link": null,
        "items": [
          {
            "item": null,
            "title": "BBF 2021 Audited Financial Statement",
            "link": "#",
            "desc": "S (USD) ACC"
          },
          {
            "item": null,
            "title": "BBF 2021 Audited Financial Statement",
            "link": "#",
            "desc": "I (USD) ACC"
          }
        ]
      }
    },
    {
      "tab": {
        "title": "Ad-Hoc comments",
        "class_filter": null,
        "link": null,
        "items": [
          {
            "item": null,
            "title": "BBF 2021 Audited Financial Statement",
            "link": "#",
            "desc": "S (USD) ACC"
          },
          {
            "item": null,
            "title": "BBF 2021 Audited Financial Statement",
            "link": "#",
            "desc": "I (USD) ACC"
          }
        ]
      }
    }
  ]
}

File:

Content:


                                import $ from "jquery";

$(document).ready(function () {

  $(".filter-options.select").select2();

  $(".down_item_wrap").each(function (index) {


  const totalLenght = $(this).children(".down_item").length ;
    var countNo = 5;
    let btn = $(this).find(".show-more-down");

    console.log(btn);
    $(this)
      .find(".down_item")
      .slice(0, 5)
      .show();
    //  $(document).on("click touchstart", btn , function(e)
    $(btn).click(function(e){
      e.preventDefault();
      $(this)
        .parent()
        .find(".down_item")
        .slice(countNo, countNo + 5)
        .slideDown();
      if (
        $(this)
          .parent()
          .find(".down_item:hidden").length === 0
      ) {
        $(this).css("display", "none");
      }
      countNo = countNo + 5;
    });

  });




});

$(".tab-slider").slick({
  slidesToShow: 3,
  slidesToScroll: 3,
  dots: false,
  arrows: true,
  infinite: false,
  responsive: [
    {
      breakpoint: 1024,
      settings: {
        slidesToShow: 3,
        slidesToScroll: 3,
        arrows: true,
      }
    },
    {
      breakpoint: 900,
      settings: {
        slidesToShow: 2,
        slidesToScroll: 2,
        arrows: true,
      }
    },
    {
      breakpoint: 620,
      settings: {
        slidesToShow: 1,
        slidesToScroll: 1,
        arrows: true,
      }
    }
  ]
});


$(".slick-slide").click(function () {
  $(".slick-slide").removeClass("active");
  $(this).addClass("active");
});

URL: /components/raw/download_element_new/download_element_new.js
Filesystem Path: components/03-components/download_element_new/download_element_new.js
Size: 1.5 KB

Content:


                                .download-element_new {
  padding: 150px 0;

  @include media-breakpoint-down(lg) {
    padding: 80px 0;
  }

  .container {
    max-width: 1060px;
    padding: 0 15px;
  }

  .title-warp {
    margin-bottom: 70px;

    @include media-breakpoint-down(lg) {
      margin-bottom: 35px;
    }

    .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: 0;

      @include media-breakpoint-down(lg) {
        font-size: 40px;
      }
    }

    .descWrap {
      max-width: 665px;
      padding-top: 25px;
    }
  }


  .downTabs_wrap {
    .nav-pills {
      align-items: flex-end;
      // justify-content: space-between;
      @include media-breakpoint-down(sm) {
        display: block;
      }
      .slick-slide{
        border-bottom: 3px solid #7777764d;
        @include media-breakpoint-down(sm) {
          border-bottom: 0;
        }
        &.active{
          color: #43BFE8;
          border-color: #43BFE8;
          .nav-link{
            color: #43BFE8;
          }
        }
      }
      .nav-item {
        flex:  0 0 33.33%;
        max-width: 330px;
        @include media-breakpoint-down(sm) {
          flex:  0 0 100%;
          max-width: 100%;
        }
        &:first-child{
          .nav-link{
            padding-left: 0;
            @include media-breakpoint-down(sm) {
              padding-left: 30px !important;
            }
          }
        }
        &:last-child{
          .nav-link{
            padding-right: 0;
          }
        }
        .nav-link {
          color: #120f29;
          font-size: 22px;
          font-family: 'PlayfairDisplay-SemiBold';
          line-height: 30px;
          text-align: left;
          padding: 0 15px 8px;
          background-color: transparent;
          border-bottom: 3px solid transparent;
          border-radius: 0;
          width: 100%;
          @include media-breakpoint-down(sm) {
            border-bottom: 2px solid #7777764d;
            &.active{
              color: #43BFE8;
              border-color: #43BFE8;
            }
          }

          @include media-breakpoint-down(lg) {
            font-size: 18px;
            line-height: 26px;
          }
          @include media-breakpoint-down(sm) {
            padding-left: 30px !important;
            padding-right: 0;
            padding-bottom: 10px;
            margin-top: 30px;
          }
          @include media-breakpoint-down(sm) {
            font-size: 16px;
            line-height: 24px;
          }
        }
      }
    }
    .tab-content{
      .tabFiter_area{
        margin-top: 50px;
        display: flex;
        align-items: center;
        justify-content: space-between;
        @include media-breakpoint-down(lg) {
          margin-top: 30px;
        }
        @include media-breakpoint-down(sm) {
          flex-direction: column;
          align-items: flex-start;
        }
        .title{
          color: #43BFE8;
          font-size: 18px;
          font-family: 'PlayfairDisplay-SemiBold';
          line-height: 24px;
          @include media-breakpoint-down(sm) {
            font-size: 16px;
            margin-bottom: 15px;
          }
        }
        .filter_wrap {
          .select2-container {
            width: 254px !important;
            // @include media-breakpoint-down(sm) {
            //   width: 254 !important;
            // }
            &.select2-container--open {
              .select2-selection--single {
                .select2-selection__arrow {
                  transform: rotate(-180deg);
                }
              }
            }
            .select2-selection--single {
              color: #120f29;
              font-size: 13px;
              font-family: "OpenSans-Bold";
              line-height: 18px;
              border: 2px solid #120f29;
              border-radius: 0;
              padding: 4px 15px;
              height: 37px;
              cursor: pointer;
              display: flex;
              align-items: center;
              background-color: transparent;
              .select2-selection__rendered {
                padding-left: 0;
              }
              .select2-selection__arrow {
                top: 0px;
                right: 10px;
                bottom: 0;
                margin: auto;
                background-image: url("/images/accordownarrow.svg");
                background-repeat: no-repeat;
                background-size: 22px;
                width: 22px;
                height: 22px;
                b {
                  border: 0;
                }
              }
            }
          }
        }
      }
      .down_item_wrap{
        margin-top: 70px;
        @include media-breakpoint-down(lg) {
          margin-top: 30px;
        }
        .down_item{
          display: none;
        }
        .down_items{
          display: flex;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 40px;
          cursor: pointer;
          text-decoration: none;
          border-bottom: 1px solid #979797;
          padding: 0 20px 25px 5px;
          @include media-breakpoint-down(lg) {
            padding: 0 0px 20px 0px;
            margin-bottom: 25px;
          }
          &:hover{
            .title_wrap{
              .title{
                color: #43BFE8;
              }
              span{
                color: #43BFE8;
              }
            }
            .downLink{
              .arrow_link {
                background-image: url("/images/download-arrow-Lblue.svg");
              }
            }
          }
          .title_wrap{
            .title{
              color: #120f29;
              font-size: 19px;
              font-family: 'PlayfairDisplay-SemiBold';
              line-height: 26px;
              margin-bottom: 5px;
              @include media-breakpoint-down(lg) {
                font-size: 16px;
              }
              @include media-breakpoint-down(sm) {
                font-size: 14px;
                line-height: 18px;
              }
            }
            span{
              color: #120f29;
              font-size: 14px;
              font-family: 'OpenSans_light';
              line-height: 22px;
              @include media-breakpoint-down(lg) {
                font-size: 12px;
              }
              @include media-breakpoint-down(sm) {
                font-size: 11px;
                line-height: 16px;
              }
            }
          }
          .downLink{
            .arrow_link {
              background-image: url("/images/download-arrow-black.svg");
              background-repeat: no-repeat;
              background-size: contain;
              width: 12px;
              height: 22px;
              display: block;
              &:hover {
                background-image: url("/images/download-arrow-Lblue.svg");
              }
            }
          }
        }
      }
      .show-more-down {
        padding-top: 10px;
        max-width: max-content;
        margin-left: 10px;
      }
    }
  }

  .slick-arrow{
    background-image: url("/images/accordownarrow.svg");
    transform: rotate(-90deg);
    top: 30%;
    &.slick-prev{
      transform: rotate(90deg);
      left: -4%;
    }
    &.slick-next{
      right: -4%;
    }
    &.slick-disabled{
      background-image: none;
    }
  }

  .slick-track{
    display: flex;
    align-items: flex-end;
    margin-left: 0;
  }

}

URL: /components/raw/download_element_new/download_element_new.scss
Filesystem Path: components/03-components/download_element_new/download_element_new.scss
Size: 7.6 KB

Handle: @download_element_new
Preview:
- With layout
- Component only
Filesystem Path: components/03-components/download_element_new/download_element_new.twig

There are no notes for this item.