FTSE Russell Styleguide

Grid About Us 

<section class="grid grid__about-us">

    <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-history-bg.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>Our Story</span></h4>

                    <h5 class="grid-item__content__text">$15 trillion currently benchmarked<br>to FTSE Russell indexes</h5>

                    <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">

                    <h4 class="grid-item__content__title"><span>Our Clients</span></h4>

                    <div class="grid-item__content__btn"><span class="btn--transparent">Learn more</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/indexing-bg.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>New Era<br>in<br>Indexing</span></h4>

                    <div class="grid-item__content__btn"><span class="btn--transparent">Read more</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/iia-bg.jpg) no-repeat scroll center center/cover;"></div>
                <div class="grid-item__filter"></div>
                <div class="grid-item__content">

                    <img class="grid-item__content__image" src="../../assets/images/iia_logo.png">

                    <div class="grid-item__content__btn"><span class="btn--transparent">Learn more</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/corporate-reponsibility-bg.png) 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>Corporate<br>Responsibility</span></h4>

                    <h5 class="grid-item__content__text">Integrity and trust are at the core of what we do.</h5>

                    <div class="grid-item__content__btn"><span class="btn--transparent">Learn more</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/press-releases-bg.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>Press Releases</span></h4>

                    <div class="grid-item__content__btn"><span class="btn--transparent">Learn more</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/careers-bg.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>Careers</span></h4>

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

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

    </div>

</section>
 
<section class="grid grid__about-us">
  {% for item in items %}
    {% render '@grid_item', item %}
  {% endfor %}
</section>
 
{
  "items": [
    {
      "title": "Our Story",
      "text": "$15 trillion currently benchmarked<br>to FTSE Russell indexes",
      "background_image": "../../assets/images/our-history-bg.jpg",
      "link": {
        "text": "Explore",
        "url": "#"
      },
      "filter": "radial"
    },
    {
      "title": "Our Clients",
      "background_image": "../../assets/images/our-clients-bg.jpg",
      "link": {
        "text": "Learn more",
        "url": "#"
      }
    },
    {
      "title": "New Era<br>in<br>Indexing",
      "background_image": "../../assets/images/indexing-bg.jpg",
      "link": {
        "text": "Read more",
        "url": "#"
      },
      "filter": "radial"
    },
    {
      "title": "INDEX",
      "image": "../../assets/images/iia_logo.png",
      "background_image": "../../assets/images/iia-bg.jpg",
      "link": {
        "text": "Learn more",
        "url": "#"
      }
    },
    {
      "title": "Corporate<br>Responsibility",
      "text": "Integrity and trust are at the core of what we do.",
      "background_image": "../../assets/images/corporate-reponsibility-bg.png",
      "link": {
        "text": "Learn more",
        "url": "#"
      },
      "filter": "linear"
    },
    {
      "title": "Press Releases",
      "background_image": "../../assets/images/press-releases-bg.jpg",
      "link": {
        "text": "Learn more",
        "url": "#"
      },
      "filter": "linear"
    },
    {
      "title": "Careers",
      "background_image": "../../assets/images/careers-bg.jpg",
      "link": {
        "text": "Learn more",
        "url": "#"
      },
      "filter": "linear"
    }
  ]
}
  • Content: 
    .grid__about-us {
  display: grid;
  grid-template-columns: 1fr 1fr;

  @include mq($breakpoint-lg) {
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr;
    padding: $space-xxl 0;
  }

  .grid-item__content__title {
    font-size: $font-size-xl;

    @include mq-only($breakpoint-xs) {
      margin-bottom: 0;
    }

    @include mq($breakpoint-lg) {
      font-size: $font-size-xxl;
    }
  }

  .grid-item__content {
    padding: $space-xl;

    @include mq($breakpoint-lg) {
      padding: 4.5rem $space-xxl;
    }
  }

  .grid-item__content__btn {
    @include mq-only($breakpoint-xs) {
      display: none;
    }

    @include mq($breakpoint-lg) {
      letter-spacing: .2em;
    }
  }

  .grid-item:nth-child(1) {
    grid-area: 1 / 1 / 1 / 3;

    @include mq($breakpoint-lg) {
      grid-area: 1 / 1 / 3 / 3;
    }
   
    .grid-item__content {
      align-self: flex-start;
      padding: $space-xl $space-big;

      @include mq($breakpoint-lg) {
        padding: 8rem 7rem;
      }
    }
    
    .grid-item__content__title, .grid-item__content__text {
      transform-origin: left;
    }

    .grid-item__content__title {
      font-size: $font-size-xxl;
      margin-bottom: .2rem;
      padding-bottom: 0;

      @include mq($breakpoint-lg) {
        font-size: 5rem;
      }
    }

    .grid-item__content__text {
      font-size: $font-size-lg;
      padding-bottom: $space-md;

      @include mq($breakpoint-lg) {
        font-size: 1.75rem;
        padding-bottom: $space-big;
      }
    }

    .grid-item__filter {
      @include filter(radial); 
    }
  }
  
  .grid-item:nth-child(2) {
    grid-area: 2 / 1 / 2 / 1;

    @include mq($breakpoint-lg) {
      grid-area: 1 / 3 / 1 / 3;
    }

    .grid-item__content__title, .grid-item__content__text {
      transform-origin: left;
    }
  }
  
  .grid-item:nth-child(3){
    grid-area: 2 / 2 / 2 / 2;

    .grid-item__content__title, .grid-item__content__text {
      transform-origin: center;
    }
    
    @include mq($breakpoint-lg) {
      grid-area: 2 / 3 / 2 / 3;
    }

    .grid-item__content {
      align-self: center;
      text-align: center;
    }

    .grid-item__filter {
      @include filter(radial); 
    }
  }
  
  .grid-item:nth-child(4) {
    grid-area: 3 / 1 / 3 / 3;

    @include mq($breakpoint-lg) {
      grid-area: 3 / 1 / 5 / 2;
    }

    .grid-item__content {
      align-self: center;
      text-align: center;

      @include mq($breakpoint-lg) {
        align-self: flex-start;
        padding: 8.5rem 2.5rem;
      }
    }

    .grid-item__content__image {
      padding-bottom: $space-big;
    }
  }
  
  .grid-item:nth-child(5) {
    grid-area: 4 / 1 / 4 / 3;
    @include mq($breakpoint-lg) {
    grid-area: 3 / 2 / 3 / 4;
    }

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

    .grid-item__content {
      align-self: flex-end;
      text-align: right;

      @include mq-only($breakpoint-mob) {
        padding: 4rem $space-big;
      }
    }

    .grid-item__content__title, .grid-item__content__text {
      transform-origin: right;
    }

    .grid-item__content__title {
      padding-bottom: 0;

      @include mq-only($breakpoint-mob) {
        font-size: $font-size-xxl;
      }
    }

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

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

    .grid-item__content__title, .grid-item__content__text {
      transform-origin: left;
    }
  }
  
  .grid-item:nth-child(7) {
    grid-area: 5 / 2 / 5 / 2;
    @include mq($breakpoint-lg) {
    grid-area: 4 / 3 / 4 / 3;
    }

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

    .grid-item__content__title, .grid-item__content__text {
      transform-origin: left;
    }
  }

}
  • URL: /components/raw/grid_about_us/_grid_about_us.scss
  • Filesystem Path: src/components/molecules/grid_about_us/_grid_about_us.scss
  • Size: 3.9 KB

There are no notes for this item.