FTSE Russell Styleguide

Grid Featured 

<section class="grid__featured container">

    <div class="grid__featured--inner grid">

        <div class="grid__item sky-blue">
            <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/bright-business-chart-210607.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>Financial Data</span></h4>

                            <h5 class="grid-item__content__text">Aenean lacinia bibendum nulla sed lorem sed consectetur. Donec id elit non mi porta doae gravida at eget metus.</h5>

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

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

            </div>

        </div>

        <div class="grid__item green">
            <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/charts-computer-data-669623.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>Analytics</span></h4>

                            <h5 class="grid-item__content__text">Aenean lacinia bibendum nulla sed lorem sed consectetur. Donec id elit non mi porta doae gravida at eget metus.</h5>

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

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

            </div>

        </div>

        <div class="grid__item yellow">
            <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/chart-close-up-data-590022.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>Research</span></h4>

                            <h5 class="grid-item__content__text">Aenean lacinia bibendum nulla sed lorem sed consectetur. Donec id elit non mi porta doae gravida at eget metus.</h5>

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

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

            </div>

        </div>

    </div>
</section>
 
<section class="grid__featured container">
{% if main_title %}<h3 class="grid__featured__title">{{ main_title }}</h3> {% endif %}
  <div class="grid__featured--inner grid">
    {% for item in items %}
    <div class="grid__item {{ item.color }}">
      {% render '@grid_item', item %}
    </div>
    {% endfor %}
  </div>
</section>
 
{
  "items": [
    {
      "title": "Financial Data",
      "text": "Aenean lacinia bibendum nulla sed lorem sed consectetur. Donec id elit non mi porta doae gravida at eget metus.",
      "background_image": "../../assets/images/bright-business-chart-210607.jpg",
      "link": {
        "text": "Learn More",
        "url": "#"
      },
      "style": "square",
      "vertical_align": "center",
      "filter": "radial",
      "color": "sky-blue"
    },
    {
      "title": "Analytics",
      "text": "Aenean lacinia bibendum nulla sed lorem sed consectetur. Donec id elit non mi porta doae gravida at eget metus.",
      "background_image": "../../assets/images/charts-computer-data-669623.jpg",
      "link": {
        "text": "Learn More",
        "url": "#"
      },
      "style": "square",
      "vertical_align": "center",
      "filter": "radial",
      "color": "green"
    },
    {
      "title": "Research",
      "text": "Aenean lacinia bibendum nulla sed lorem sed consectetur. Donec id elit non mi porta doae gravida at eget metus.",
      "background_image": "../../assets/images/chart-close-up-data-590022.jpg",
      "link": {
        "text": "Learn More",
        "url": "#"
      },
      "style": "square",
      "vertical_align": "center",
      "filter": "radial",
      "color": "yellow"
    }
  ]
}
  • Content: 
    .grid__featured {
  
  @include mq($breakpoint-lg) {
    padding: $space-xl 0;
  }

  
  &--inner {
    grid-template-columns: 1fr;
    justify-content: center;
    margin: 0;

    @include mq($breakpoint-lg) {
      //grid-gap: $space-lg;
      grid-template-columns: 1fr 1fr 1fr;
    }

    @include mq($breakpoint-xxl) {
      //grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    }
  }

  .grid__item {
    flex-basis: 100%;

    @include mq($breakpoint-lg) {
      flex-basis: calc(33.33333% - 1.25rem);
      margin: 0 .625rem;
    }

    .grid-item {
      background-blend-mode: luminosity;
    }

    .grid-item::after  {
      //background-blend-mode: luminosity;
      content: '';
      position: absolute;
      width: inherit;
      height: inherit;
      top: 0;
      left: 0;
      
    }

    /*&:nth-child(1) .grid-item::after {
      background-color: rgba(#1E9DC4, 0.75);
    }

    &:nth-child(2) .grid-item::after   {
      background-color: rgba(#21A795, 0.75);
    }

    &:nth-child(3) .grid-item::after   {
      background-color:rgba(#F9B86A, 0.75);
    }

    &:nth-child(4) .grid-item::after   {
      background-color:rgba(83,23,50, 0.75);
    }*/

    &.cadet-blue .grid-item::after {
      background-color: rgba(#3a7088, 0.75);
    }

    &.green .grid-item::after {
      background-color: rgba(#21A795, 0.75);
    }

    &.pink .grid-item::after {
      background-color: rgba(#b24b5c, 0.75);
    }

    &.purple .grid-item::after {
      background-color: rgba(#531732, 0.75);
    }

    &.red .grid-item::after {
      background-color: rgba(#7F1340, 0.75);
    }

    &.sky-blue .grid-item::after {
      background-color: rgba(#1F9EC4, 0.75);
    }

    &.teal .grid-item::after {
      background-color: rgba(#00515c, 0.75);
    }

    &.yellow .grid-item::after {
      background-color: rgba(#F8B15B, 0.75);
    }
  }

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

    &__title {
      align-items: flex-start;
      font-size: $font-size-xl;
    }
  }
}
  • URL: /components/raw/grid_featured/_grid_featured.scss
  • Filesystem Path: src/components/molecules/grid_featured/_grid_featured.scss
  • Size: 2 KB

There are no notes for this item.