FTSE Russell Styleguide

Grid Homepage 

<section class="grid__home grid">
    <div class="grid-item">
        <a class="grid-item__link" href="#">
            <div class="grid-item__container">
                <div class="grid-item__background-image" style="background: url(../../assets/images/raphael-schaller-335025-unsplash.jpg) no-repeat scroll center center/cover;"></div>
                <div class="grid-item__filter"></div>
                <div class="grid-item__content">

                    <h4 class="grid-item__content__title"><span>Implementation<br>considerations for factor<br>investing</span></h4>

                    <div class="grid-item__content__btn"><span class="btn--transparent">Explore</span></div>

                </div>
            </div>
        </a>

    </div>

    <div class="grid-item">
        <a class="grid-item__link" href="">
            <div class="grid-item__container">
                <div class="grid-item__background-image" style="background: url(../../assets/images/our-clients-bg.jpg) no-repeat scroll center center/cover;"></div>
                <div class="grid-item__filter"></div>
                <div class="grid-item__content">

                    <div class="grid-item__content--top">
                        <div class="grid-item__category">Blog</div>

                        <div class="grid-item__label">

                            <svg class="icon">
                <use xlink:href="/assets/sprites/icons.svg#ico-trending"></use>
              </svg>

                            <span>
              Trending
              </span>
                        </div>

                    </div>

                    <h4 class="grid-item__content__title"><span>Aenean eu leo magna ornare sem lacinia quam venenatis</span></h4>

                    <div class="grid-item__content--bottom">
                        <div class="grid-item__tag">#LoremIpsum</div>
                        <div class="grid-item__date">October 21, 2018</div>
                    </div>

                </div>
            </div>
        </a>

    </div>

    <div class="grid-item">
        <a class="grid-item__link" href="">
            <div class="grid-item__container">
                <div class="grid-item__background-image" style="background: url(../../assets/images/indexing-bg.jpg) no-repeat scroll center center/cover;"></div>
                <div class="grid-item__filter"></div>
                <div class="grid-item__content">

                    <div class="grid-item__content--top">
                        <div class="grid-item__category">Research</div>

                        <div class="grid-item__label">

                            <svg class="icon">
                <use xlink:href="/assets/sprites/icons.svg#ico-trending"></use>
              </svg>

                            <span>
              Trending
              </span>
                        </div>

                    </div>

                    <h4 class="grid-item__content__title"><span>Mattis Etiam Porta Mollis Fusce</span></h4>

                    <div class="grid-item__content--bottom">
                        <div class="grid-item__tag">#LoremIpsum</div>
                        <div class="grid-item__date">October 21, 2018</div>
                    </div>

                </div>
            </div>
        </a>

    </div>

    <div class="grid-item">
        <a class="grid-item__link" href="">
            <div class="grid-item__container">
                <div class="grid-item__background-image" style="background: url(../../assets/images/corporate-reponsibility-bg.png) no-repeat scroll center center/cover;"></div>
                <div class="grid-item__filter"></div>
                <div class="grid-item__content">

                    <div class="grid-item__content--top">
                        <div class="grid-item__category">Research</div>

                        <div class="grid-item__label">

                            <svg class="icon">
                <use xlink:href="/assets/sprites/icons.svg#ico-trending"></use>
              </svg>

                            <span>
              Trending
              </span>
                        </div>

                    </div>

                    <h4 class="grid-item__content__title"><span>Cras mattis consectetur purus sit amet fermentum.</span></h4>

                    <div class="grid-item__content--bottom">
                        <div class="grid-item__tag">#LoremIpsum</div>
                        <div class="grid-item__date">October 21, 2018</div>
                    </div>

                </div>
            </div>
        </a>

    </div>

</section>
 
<section class="grid__home grid">
    {% render '@grid_item', itemFirst %}
    {% render '@grid_item', itemSecond%}
    {% render '@grid_item', itemThird %}
    {% render '@grid_item', itemFourth %}
</section>
 
{
  "itemFirst": {
    "title": "Implementation<br>considerations for factor<br>investing",
    "background_image": "../../assets/images/raphael-schaller-335025-unsplash.jpg",
    "link": {
      "text": "Explore",
      "url": "#"
    },
    "filter": "radial"
  },
  "itemSecond": {
    "title": "Aenean eu leo magna ornare sem lacinia quam venenatis",
    "background_image": "../../assets/images/our-clients-bg.jpg",
    "category": "Blog",
    "label": "Trending",
    "tag": "LoremIpsum",
    "date": "October 21, 2018",
    "filter": "radial"
  },
  "itemThird": {
    "title": "Mattis Etiam Porta Mollis Fusce",
    "background_image": "../../assets/images/indexing-bg.jpg",
    "category": "Research",
    "label": "Trending",
    "tag": "LoremIpsum",
    "date": "October 21, 2018",
    "filter": "radial"
  },
  "itemFourth": {
    "title": "Cras mattis consectetur purus sit amet fermentum.",
    "background_image": "../../assets/images/corporate-reponsibility-bg.png",
    "category": "Research",
    "label": "Trending",
    "tag": "LoremIpsum",
    "date": "October 21, 2018",
    "filter": "radial"
  }
}
  • Content: 
    .grid__home {
  margin: 0;

  @include mq($breakpoint-lg) {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 33.33333% 33.33333% 33.33333%;
    margin: 0;
    min-height: 600px;
    height: 30vw;
  }

  @include mq($breakpoint-xxl) {
    min-height: 30vw;
  }

  .grid-item__content {
    @include mq($breakpoint-lg) {
      padding: $space-md;
    }
  }

  .grid-item__content__title {
    @include mq($breakpoint-lg) {
      padding-bottom: 0;
    }
  }

  .grid-item__filter {
    @include filter(radial); 
  }

  .grid-item {
    height: 101%;
  }

  .grid-item:nth-child(1) {
     @include mq($breakpoint-lg) {
       grid-area: 1 / 1 / 4 / 4;
     }

     .grid-item__content {
       align-self: center;
       padding: $space-xl;

       @include mq($breakpoint-lg) {
         padding: $space-md 11vw;
       }
     }

     .grid-item__content__title {
        font-size: $font-size-xl;
        padding-bottom: $space-xl;
        text-align: left;

         @include mq($breakpoint-lg) {
           font-size: $font-size-xxl;
         }
      }
   }
   
   .grid-item:nth-child(2) {
     //grid-area: 2 / 1 / 2 / 1;
     @include mq($breakpoint-lg) {
       grid-area: 1 / 4 / 2 / 4;
     }
   }
   
   .grid-item:nth-child(3) {
     //grid-area: 2 / 2 / 2 / 2;
     @include mq($breakpoint-lg) {
       grid-area: 2 / 4 / 3 / 4;
     }
   }
   
   .grid-item:nth-child(4) {
    // grid-area: 2 / 3 / 2 / 3;
     @include mq($breakpoint-lg) {
       grid-area: 3 / 4 / 4 / 4;
     }
   }
}

:lang(ja) {
  h4.grid-item__content__title span {
    font-size: 95%;
  }
}
  • URL: /components/raw/grid_homepage/_grid_homepage.scss
  • Filesystem Path: src/components/molecules/grid_homepage/_grid_homepage.scss
  • Size: 1.6 KB

There are no notes for this item.