FTSE Russell Styleguide

Homepage Indexes 

<div class="indexes-block">
    <div class="indexes-block--inner">

        <div class="indexes-block__background-image__container">
            <div class="indexes-block__background-image" style="background: url(../../assets/images/blur-business-chart-159888.jpg) #540836 no-repeat scroll center center/cover;"></div>
            <div class="indexes-block__background-filter"></div>
        </div>

        <div class="indexes-block__content container">

            <div class="indexes-block__modal container">
                <div class="modal__close"><span></span></div>
                <div class="indexes-block__modal--inner grid">

                    <div class="indexes-block__modal--left">
                        <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-tag"></use></svg>
                    </div>

                    <div class="indexes-block__modal--right">
                        <h3 class="indexes-block__modal__title">Smart Beta</h3>
                        <p class="indexes-block__modal__description">Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. </p>
                        <a href="" class="btn btn--transparent">Read More</a>
                    </div>

                </div>
            </div>

            <div class="indexes-block__content--inner grid">

                <div class="indexes-block__left">
                    <h3 class="indexes-block__title"> FTSE Russell Indexes</h3>
                    <p class="indexes-block__description">Aenean lacinia bibendum nulla sed lorem sed consectetur. Donec id elit non mi porta doae gravida at eget metus. Maecenas sed diam eget risus varius blandit sit.</p>
                    <div class="hero__cta">
                        <a href="#" class="btn btn--transparent">All Indexes</a>
                    </div>
                </div>

                <div class="indexes-block__right grid">
                    <div class="indexes-block__right--left">
                        <div class="index__item">
                            <a class="index__item__link">
    <span class="index__item__title"><span class="index__item__icon"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-tag"></use></svg></span><h4>Smart Beta</h4></span>
    <span class="index__item__arrow"><i class='icon icon-chevron-down'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg></i></span>
  </a>
                        </div>
                        <div class="index__item">
                            <a class="index__item__link">
    <span class="index__item__title"><span class="index__item__icon"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-tag"></use></svg></span><h4>Smart Beta</h4></span>
    <span class="index__item__arrow"><i class='icon icon-chevron-down'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg></i></span>
  </a>
                        </div>
                        <div class="index__item">
                            <a class="index__item__link">
    <span class="index__item__title"><span class="index__item__icon"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-tag"></use></svg></span><h4>Smart Beta</h4></span>
    <span class="index__item__arrow"><i class='icon icon-chevron-down'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg></i></span>
  </a>
                        </div>
                        <div class="index__item">
                            <a class="index__item__link">
    <span class="index__item__title"><span class="index__item__icon"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-tag"></use></svg></span><h4>Smart Beta</h4></span>
    <span class="index__item__arrow"><i class='icon icon-chevron-down'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg></i></span>
  </a>
                        </div>
                    </div>
                    <div class="indexes-block__right--right">
                        <div class="index__item">
                            <a class="index__item__link">
    <span class="index__item__title"><span class="index__item__icon"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-tag"></use></svg></span><h4>Smart Beta</h4></span>
    <span class="index__item__arrow"><i class='icon icon-chevron-down'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg></i></span>
  </a>
                        </div>
                        <div class="index__item">
                            <a class="index__item__link">
    <span class="index__item__title"><span class="index__item__icon"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-tag"></use></svg></span><h4>Smart Beta</h4></span>
    <span class="index__item__arrow"><i class='icon icon-chevron-down'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg></i></span>
  </a>
                        </div>
                        <div class="index__item">
                            <a class="index__item__link">
    <span class="index__item__title"><span class="index__item__icon"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-tag"></use></svg></span><h4>Smart Beta</h4></span>
    <span class="index__item__arrow"><i class='icon icon-chevron-down'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg></i></span>
  </a>
                        </div>
                        <div class="index__item">
                            <a class="index__item__link">
    <span class="index__item__title"><span class="index__item__icon"><svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-tag"></use></svg></span><h4>Smart Beta</h4></span>
    <span class="index__item__arrow"><i class='icon icon-chevron-down'> <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#ico-chevron-down"></use></svg></i></span>
  </a>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
 
<div class="indexes-block">
  <div class="indexes-block--inner">

    <div class="indexes-block__background-image__container">
      <div class="indexes-block__background-image" style="background: url({{ image_src }}) #540836 no-repeat scroll center center/cover;"></div>
      <div class="indexes-block__background-filter"></div>
    </div>

    <div class="indexes-block__content container">

      <div class="indexes-block__modal container">
        <div class="modal__close"><span></span></div>
        <div class="indexes-block__modal--inner grid">

            <div class="indexes-block__modal--left">
              <svg class="icon"><use xlink:href="/assets/sprites/icons.svg#{{ index_1.icon }}"></use></svg>
            </div>

            <div class="indexes-block__modal--right">
              <h3 class="indexes-block__modal__title">{{ index_1.title }}</h3>
              <p class="indexes-block__modal__description">{{ index_1.description }}</p>
              <a href="{{ index.cta.href }}" class="btn btn--transparent">{{ index_1.cta.label }}</a>
            </div>

        </div>
      </div>

      <div class="indexes-block__content--inner grid">

        <div class="indexes-block__left">
          <h3 class="indexes-block__title"> {{ title }}</h3>
          <p class="indexes-block__description">{{ text }}</p>
          <div class="hero__cta">
            <a href="{{ cta.href }}" class="btn btn--transparent">{{ cta.label }}</a>
          </div>
        </div>

        <div class="indexes-block__right grid">
          <div class="indexes-block__right--left">
            {% render '@index_item', index_1 %}
            {% render '@index_item', index_2 %}
            {% render '@index_item', index_3 %}
            {% render '@index_item', index_4 %}
          </div>
          <div class="indexes-block__right--right">
             {% render '@index_item', index_5 %}
             {% render '@index_item', index_6 %}
             {% render '@index_item', index_7 %}
             {% render '@index_item', index_8 %}
          </div>
        </div>
      </div>
    </div>
  </div>
  </div>
 
{
  "title": "FTSE Russell Indexes",
  "image_src": "../../assets/images/blur-business-chart-159888.jpg",
  "text": "Aenean lacinia bibendum nulla sed lorem sed consectetur. Donec id elit non mi porta doae gravida at eget metus. Maecenas sed diam eget risus varius blandit sit.",
  "cta": {
    "label": "All Indexes",
    "href": "#"
  },
  "index_1": {
    "title": "Smart Beta",
    "icon": "ico-tag",
    "description": "Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. ",
    "cta": {
      "label": "Read More",
      "href": "#"
    }
  },
  "index_2": {
    "title": "Smart Beta",
    "icon": "ico-tag",
    "description": "Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. ",
    "cta": {
      "label": "Read More",
      "href": "#"
    }
  },
  "index_3": {
    "title": "Smart Beta",
    "icon": "ico-tag",
    "description": "Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. ",
    "cta": {
      "label": "Read More",
      "href": "#"
    }
  },
  "index_4": {
    "title": "Smart Beta",
    "icon": "ico-tag",
    "description": "Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. ",
    "cta": {
      "label": "Read More",
      "href": "#"
    }
  },
  "index_5": {
    "title": "Smart Beta",
    "icon": "ico-tag",
    "description": "Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. ",
    "cta": {
      "label": "Read More",
      "href": "#"
    }
  },
  "index_6": {
    "title": "Smart Beta",
    "icon": "ico-tag",
    "description": "Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. ",
    "cta": {
      "label": "Read More",
      "href": "#"
    }
  },
  "index_7": {
    "title": "Smart Beta",
    "icon": "ico-tag",
    "description": "Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. ",
    "cta": {
      "label": "Read More",
      "href": "#"
    }
  },
  "index_8": {
    "title": "Smart Beta",
    "icon": "ico-tag",
    "description": "Donec sed odio dui. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Nulla vitae elit libero, a pharetra augue. ",
    "cta": {
      "label": "Read More",
      "href": "#"
    }
  }
}
  • Content: 
    .indexes-block {
  position: relative;
  overflow: hidden;

  &--inner{
  min-height: 500px;
  display: flex;
  }

  &__content {
    align-items: flex-start;
    color: $white;
    display: flex;
    min-height: 500px;
    width: 100%;

    @include mq($breakpoint-lg) {
      align-items: center;
    }

    &--inner {
      margin: $space-lg;
      opacity: 1;
      padding: $space-xl $space-lg;
      transition: 0.6s;
      transform: scale(1);
      width: 100%;
      z-index: 2;

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

  &__title {
    font-size: $font-size-xl;
    font-weight: $font-weight-light;
  }
}

.indexes-block__left {
  transform: scale(1);
  opacity: 1;
  transition: 0.3s;

  @include mq($breakpoint-lg) {
    flex-basis: calc(33.33333% - 2rem);
    padding: 0 $space-md;
  }
}

.indexes-block__right {
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  opacity: 1;
  transform: scale(1);
  transition: 0.3s;

  @include mq($breakpoint-lg) {
    flex-basis: calc(66.66667% - 2rem);
    padding: 0 $space-md;
  }

  & > div {
    @include mq($breakpoint-lg) {
      flex-basis: calc(50% - 2.5rem);
      padding: 0 $space-lg;
    }
  }
}

.indexes-block--flipped {

  .indexes-block__left {
    transform: scale(0) translateX(-50%);
    opacity: 0;
  }

  .indexes-block__right {
    transform: scale(0) translateX(50%);
    opacity: 0;
  }

  .indexes-block__modal {
    transform: scale(1) translateY(-50%);
    opacity: 1;
    z-index: $zindex-modal;
  }
}

.indexes-block__background-image__container {
  width: 100%;
  height: 100%;
  position: absolute;

  .indexes-block__background-image {
    width: 100%;
    height: 100%;
    position: absolute;
    
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    //background-color: linear-gradient(90deg, rgba(84,8,54,0) 0%, #540836 100%);
  

    &--blur{
      filter: blur(5px);
    }
  }

  .indexes-block__background-filter {
    width: 100%;
    height: 100%;
    position: absolute;
    opacity: .9;

  }
}

.indexes-block__modal {
  position: absolute;
  padding: $space-xxl;
  top: 50%;
  transition: 0.3s;
  transform: scale(0.7) translateY(-50%);;
  opacity: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;

  .icon {

    width: 100px;
    height: 100px;
    fill: rgba(255, 255, 255, .7);
    padding: $space-md;

    @include mq($breakpoint-lg) {
      width: 80%;
      height: 80%;
    }
  }

  &--left {
    text-align: center;

    @include mq($breakpoint-lg) {
      flex-basis: 33.33333%;
    }
  }

  &--right {
    @include mq($breakpoint-lg) {
      flex-basis: 66.66667%;
    }
  }

  &__title {
    font-size: $font-size-xl;
    text-align: center;

    @include mq($breakpoint-lg) {
      text-align: left;
    }

  }

  &__description {
    @include mq-only($breakpoint-mob) {
      text-align: center;
    }
  }

  &--inner {
    width: 100%;

    @include mq($breakpoint-lg) {
      grid-template-columns: 1fr 2fr;
    }
  }
}
  • URL: /components/raw/homepage_indexes/_homepage_indexes.scss
  • Filesystem Path: src/components/organisms/homepage_indexes/_homepage_indexes.scss
  • Size: 3.1 KB

There are no notes for this item.