FTSE Russell Styleguide

Grid 

<section class="grid grid__section">

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

                    <h2 class="h1 grid-item__content__title">Our Story</h2>

                    <h5 class="grid-item__content__text">$15 trillion currently benchmarked 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 in 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/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/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/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__section">
  {% for item in items %}
    {% render '@grid_item', item %}
  {% endfor %}
</section>
 
{
  "items": [
    {
      "title": "Our Story",
      "text": "$15 trillion currently benchmarked to FTSE Russell indexes",
      "background_image": "../../assets/images/our-history-bg.jpg",
      "link": {
        "text": "Explore",
        "url": "#"
      },
      "style": "square__big",
      "vertical_align": "top",
      "filter": "radial"
    },
    {
      "title": "Our Clients",
      "background_image": "../../assets/images/our-clients-bg.jpg",
      "link": {
        "text": "Learn more",
        "url": "#"
      },
      "style": "square"
    },
    {
      "title": "New Era in Indexing",
      "background_image": "../../assets/images/indexing-bg.jpg",
      "link": {
        "text": "Read more",
        "url": "#"
      },
      "style": "square",
      "align": "center",
      "vertical_align": "center",
      "filter": "radial"
    },
    {
      "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": "#"
      },
      "style": "rectangle",
      "align": "right",
      "colspan": 2,
      "filter": "linear"
    },
    {
      "title": "INDEX",
      "image": "../../assets/images/iia_logo.png",
      "background_image": "../../assets/images/iia-bg.jpg",
      "link": {
        "text": "Learn more",
        "url": "#"
      },
      "style": "rectangle__vertical",
      "align": "center",
      "vertical_align": "top",
      "rowspan": 3
    },
    {
      "title": "Press Releases",
      "background_image": "../../assets/images/press-releases-bg.jpg",
      "link": {
        "text": "Learn more",
        "url": "#"
      },
      "style": "square",
      "filter": "linear"
    },
    {
      "title": "Careers",
      "background_image": "../../assets/images/careers-bg.jpg",
      "link": {
        "text": "Learn more",
        "url": "#"
      },
      "style": "square",
      "filter": "linear"
    }
  ]
}
  • Content: 
    .grid__section {

  .grid-item {

    &::after {
      content: '';
      display: block;
      height: 0;
      padding-bottom: 100%;
      @include mq($breakpoint-lg) {
        padding-bottom: 50%;
      }
    }

    &__container {
      align-items: flex-end;
      justify-content: flex-start;
      position: absolute;
      top: 0;
    }

    &__content {
      align-self: flex-end;
      padding: $space-xl $space-lg;
      width: 100%;
    }
  }
}
  • URL: /components/raw/grid/_grid.scss
  • Filesystem Path: src/components/molecules/grid/_grid.scss
  • Size: 457 Bytes

There are no notes for this item.