Style Guide

News Element 

<div class="news-wrap bg-white">
    <div class="container">
        <div class="title-warp">
            <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>
        </div>
        <div class="row row-reverse">
            <div class="col-md-6">
                <div class="openNews-wrap">
                    <a href="#">
                        <div class="img-wrap">
                            <img src="/images/big-header-img.jpg" alt="img">
                        </div>
                        <div class="news-content">
                            <h4 class="sub-title">Innovation</h4>
                            <h2 class="main-title"> Sustainable Investing and ESG Advocated hope dire climate report serves as wake </h2>
                            <p class="desc">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore</p>
                        </div>
                    </a>
                </div>

            </div>
            <div class="col-md-6">
                <div class="allNews-wrap">
                    <a href="#">
                        <div class="img-wrap">
                            <img src="/images/big-header-img.jpg" alt="img">
                        </div>
                        <div class="news-content">
                            <h4 class="sub-title">Innovation</h4>
                            <h2 class="main-title"> Sustainable Investing and ESG Advocated hope dire climate report serves as wake </h2>
                        </div>
                    </a>
                </div>

                <div class="allNews-wrap">
                    <a href="#">
                        <div class="img-wrap">
                            <img src="/images/big-header-img.jpg" alt="img">
                        </div>
                        <div class="news-content">
                            <h4 class="sub-title">Innovation2</h4>
                            <h2 class="main-title"> Sustainable Investing and ESG Advocated hope dire climate report serves as wake </h2>
                        </div>
                    </a>
                </div>

                <div class="allNews-wrap">
                    <a href="#">
                        <div class="img-wrap">
                            <img src="/images/big-header-img.jpg" alt="img">
                        </div>
                        <div class="news-content">
                            <h4 class="sub-title">Innovation2</h4>
                            <h2 class="main-title"> Sustainable Investing and ESG Advocated hope dire climate report serves as wake </h2>
                        </div>
                    </a>
                </div>

            </div>
            <div class="col-md-12">
                <div class="allNewsBelow">
                    <div class="allNews-wrap">
                        <a href="#">
                            <div class="img-wrap">
                                <img src="/images/big-header-img.jpg" alt="img">
                            </div>
                            <div class="news-content">
                                <h4 class="sub-title">Innovation</h4>
                                <h2 class="main-title"> Sustainable Investing and ESG Advocated hope dire climate report serves as wake </h2>
                            </div>
                        </a>
                    </div>

                    <div class="allNews-wrap">
                        <a href="#">
                            <div class="img-wrap">
                                <img src="/images/big-header-img.jpg" alt="img">
                            </div>
                            <div class="news-content">
                                <h4 class="sub-title">Innovation2</h4>
                                <h2 class="main-title"> Sustainable Investing and ESG Advocated hope dire climate report serves as wake </h2>
                            </div>
                        </a>
                    </div>

                    <div class="allNews-wrap">
                        <a href="#">
                            <div class="img-wrap">
                                <img src="/images/big-header-img.jpg" alt="img">
                            </div>
                            <div class="news-content">
                                <h4 class="sub-title">Innovation3</h4>
                                <h2 class="main-title"> Sustainable Investing and ESG Advocated hope dire climate report serves as wake </h2>
                            </div>
                        </a>
                    </div>

                    <div class="allNews-wrap">
                        <a href="#">
                            <div class="img-wrap">
                                <img src="/images/big-header-img.jpg" alt="img">
                            </div>
                            <div class="news-content">
                                <h4 class="sub-title">Innovation4</h4>
                                <h2 class="main-title"> Sustainable Investing and ESG Advocated hope dire climate report serves as wake </h2>
                            </div>
                        </a>
                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="news-wrap {{ bgGrey ? 'bg-grey' : 'bg-white' }}">
  <div class="container">
    {% if mainTitle is not empty or desc is not empty %}
    <div class="title-warp">
    {% if mainTitle is not empty %}
      <h1 class="main-title">{{mainTitle}}</h1>
    {% endif  %}
    {% if desc is not empty %}
      <p class="descWrap">{{desc}}</p>
    {% endif  %}
    </div>
    {% endif  %}
      <div class="row row-reverse">
        <div class="col-md-6">
          {% for item in mainNewsBlock %}
            {{ item }}
          {% endfor %}
        </div>
        <div class="col-md-6">
          {% for item in allNewsBlock %}
            {{ item }}
          {% endfor %}
        </div>
        <div class="col-md-12">
          <div class="allNewsBelow">
            {% for item in allNewsBlockBelow %}
              {{ item }}
            {% endfor %}

            {%if ( allNewsBlockBelow | length > 4 )%}
              <a class="show-more-down btn-link">{{btnText}}</a>
            {% endif %}

          </div>
        </div>
      </div>
  </div>
</div>
 
{
  "bgGrey": false,
  "btnText": "Load more articles",
  "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.",
  "mainNewsBlock": [
    {
      "$news_item_big": {
        "imgSrc": "/images/big-header-img.jpg",
        "mainTitle": "Sustainable Investing and ESG Advocated hope dire climate report serves as wake",
        "subTitle": "Innovation",
        "desc": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore",
        "link": "#"
      }
    }
  ],
  "allNewsBlock": [
    {
      "$news_item_small": {
        "imgSrc": "/images/big-header-img.jpg",
        "mainTitle": "Sustainable Investing and ESG Advocated hope dire climate report serves as wake",
        "subTitle": "Innovation",
        "link": "#"
      }
    },
    {
      "$news_item_small": {
        "imgSrc": "/images/big-header-img.jpg",
        "mainTitle": "Sustainable Investing and ESG Advocated hope dire climate report serves as wake",
        "subTitle": "Innovation2",
        "link": "#"
      }
    },
    {
      "$news_item_small": {
        "imgSrc": "/images/big-header-img.jpg",
        "mainTitle": "Sustainable Investing and ESG Advocated hope dire climate report serves as wake",
        "subTitle": "Innovation2",
        "link": "#"
      }
    }
  ],
  "allNewsBlockBelow": [
    {
      "$news_item_small": {
        "imgSrc": "/images/big-header-img.jpg",
        "mainTitle": "Sustainable Investing and ESG Advocated hope dire climate report serves as wake",
        "subTitle": "Innovation",
        "link": "#"
      }
    },
    {
      "$news_item_small": {
        "imgSrc": "/images/big-header-img.jpg",
        "mainTitle": "Sustainable Investing and ESG Advocated hope dire climate report serves as wake",
        "subTitle": "Innovation2",
        "link": "#"
      }
    },
    {
      "$news_item_small": {
        "imgSrc": "/images/big-header-img.jpg",
        "mainTitle": "Sustainable Investing and ESG Advocated hope dire climate report serves as wake",
        "subTitle": "Innovation3",
        "link": "#"
      }
    },
    {
      "$news_item_small": {
        "imgSrc": "/images/big-header-img.jpg",
        "mainTitle": "Sustainable Investing and ESG Advocated hope dire climate report serves as wake",
        "subTitle": "Innovation4",
        "link": "#"
      }
    }
  ]
}
  • Content: 
    import $ from "jquery";

$(document).ready(function () {

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


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

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

  });

});
  • URL: /components/raw/news/news.js
  • Filesystem Path: components/03-components/news/news.js
  • Size: 782 Bytes
  • Content: 
    .news-wrap {
  padding: 80px 0;
  @include media-breakpoint-down(lg) {
    padding: 60px 0;
  }
  .container {
    max-width: 1060px;
    padding: 0 15px;
  }

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

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

    .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;
    }
  }

  // .row-reverse{
  //   @include media-breakpoint-down(md) {
  //     flex-direction: column-reverse;
  //   }
  // }

  .openNews-wrap{
    margin-right: 30px;
    @include media-breakpoint-down(md) {
     margin-right: 0;
     margin-bottom: 30px;
    }
    &:hover{
      .news-content{
        .main-title{
          color: #37AAE1;
        }
      }
    }
    a{
      text-decoration: none;
      &:hover{
        text-decoration: none;
      }
    }
    .img-wrap{
      img{
        max-width: 100%;
        width: 100%;
        height: 377px;
        object-fit: cover;
        @include media-breakpoint-down(lg) {
          height: 300px;
        }
      }
    }
    .news-content{
      margin-top: 30px;
      @include media-breakpoint-down(md) {
        margin-top: 15px;
      }
      .main-title{
        color: #120F29;
        font-size: 29px;
        font-weight: 500;
        font-family: 'PlayfairDisplay-Regular';
        line-height: 45px;
        margin-bottom: 15px;
        @include media-breakpoint-down(lg) {
          font-size: 24px;
          line-height: 29px;
        }
      }
      .sub-title{
        color: #120F29;
        font-size: 17px;
        font-weight: 300;
        font-family: 'OpenSans_light';
        line-height: 28px;
        margin-bottom: 0px;
        @include media-breakpoint-down(lg) {
          font-size: 16px;
          line-height: 24px;
        }
      }
      .desc{
        color: #120F29;
        font-size: 17px;
        font-weight: 400;
        line-height: 29px;
        font-family: 'OpenSans-Regular';
        margin-bottom: 0;
        @include media-breakpoint-down(lg) {
          font-size: 16px;
          line-height: 24px;
        }
      }
    }

  }
  .allNews-wrap{
    display: flex;
    align-items: center;
    cursor: pointer;
    padding: 30px 0;
    border-bottom: 1px solid rgba(151, 151, 151, 0.20);
    @include media-breakpoint-down(md) {
      padding: 20px 0;
    }
    @include media-breakpoint-down(md) {

    }
    &:hover{
      .news-content{
        .main-title{
          color: #37AAE1;
        }
      }
    }
    &:first-child{
      padding-top: 0;
    }
    &:last-child{
      padding-bottom: 0;
      border-bottom: 0;
    }
    a{
      text-decoration: none;
      display: flex;
      align-items: center;
      &:hover{
        text-decoration: none;
      }
    }
    .img-wrap{
      margin-right: 20px;
      img{
        max-width: 232px;
        width: 232px;
        height: 174px;
        object-fit: cover;
        @include media-breakpoint-down(md) {
          max-width: 180px;
          width: 180px;
          height: 135px;
        }
      }
    }
    .news-content{
      .sub-title{
        color: #120F29;
        font-size: 17px;
        font-weight: 300;
        font-family: 'OpenSans_light';
        line-height: 28px;
        margin-bottom: 0px;
        word-break: break-all;
        @include media-breakpoint-down(lg) {
          font-size: 16px;
          line-height: 24px;
        }
      }
      .main-title{
        color: #120F29;
        font-family: 'PlayfairDisplay-Regular';
        font-size: 25px;
        line-height: 36px;
        margin-bottom: 0;
        // min-height: 168px;
        overflow: hidden;
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        white-space: initial;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        word-break: break-all;
        @include media-breakpoint-down(lg) {
          font-size: 18px;
          line-height: 26px;
        }
        @include media-breakpoint-down(md) {
          -webkit-line-clamp: 4;
        }
      }
    }
  }
  .allNewsBelow{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    margin-top: 30px;
    border-top: 1px solid rgba(151, 151, 151, 0.20);
    @include media-breakpoint-down(md) {
      margin-top: 0;
      border-top: 0;
      display: block;
      margin-bottom: 20px;
    }
    .allNews-wrap{
      padding: 30px 0;
      flex: 0 0 48%;
      max-width: 48%;
      display: none;
      @include media-breakpoint-down(md) {
        flex: 0 0 100%;
        max-width: 100%;
        padding: 20px 0;
      }
      &:nth-child(even){
        margin-left: 30px;
        @include media-breakpoint-down(md) {
          margin-left: 0;
        }
      }
    }
    .show-more-down{
      margin-top: 20px;
    }
  }
}
  • URL: /components/raw/news/news.scss
  • Filesystem Path: components/03-components/news/news.scss
  • Size: 5 KB

There are no notes for this item.