FTSE Russell Styleguide

Content Piece: Icon 

<div class="content__piece__icon">
    <svg class="icon">
    <use xlink:href="/assets/sprites/icons.svg#ico-rocket"></use>
  </svg>
    <span>FTSE Russell is also major provider of data solutions, from top down economic and demographic information, to detailed equity, debt and sustainability fundamental data analysis, to corporations, financial institutions, business academics and reference libraries. Through its acquisition of Mergent, a provider of business and financial institutions, business academics and reference libraries. Through its acquisition of Mergent, a provider of business and financial information on public and private companies globally for more than 100 years.</span>
</div>
 
<div class="content__piece__icon">
  <svg class="icon">
    <use xlink:href="/assets/sprites/icons.svg#{{ icon }}"></use>
  </svg>
  <span>{{ text }}</span>
</div>
 
{
  "text": "FTSE Russell is also major provider of data solutions, from top down economic and demographic information, to detailed equity, debt and sustainability fundamental data analysis, to corporations, financial institutions, business academics and reference libraries. Through its acquisition of Mergent, a provider of business and financial institutions, business academics and reference libraries. Through its acquisition of Mergent, a provider of business and financial information on public and private companies globally for more than 100 years.",
  "icon": "ico-rocket"
}
  • Content: 
    .content__piece {
  color: $gray;

  &__title {
    font-weight: $font-weight-normal;
  }

  &__text {
    line-height: 2;
  }

  &__headline {
    color: $black;
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;

    .huge {
      font-size: ( $font-size-xxl*2 );
      font-weight: $font-weight-light;
    }

    .h1 {
      font-weight: $font-weight-bold;
      margin-top: 0;
    }

    h5 {
      color: $black;
    }

    &.bg__img {
      background-position: center;
      background-repeat: no-repeat;
      background-size: cover;
      height: calc(100vw - 3rem);

      @include mq($breakpoint-lg) {
        background-size: contain;
        height: auto;
      }
    }
  }

  &__icon {
    display: flex;
    flex-direction: row;
    position: relative;

    svg {
      fill: $gray;
      height: 4rem;
      margin: 0 auto 0 0;
      width: 4rem;
    }

    span {
      flex-basis: calc(100% - 6rem);
      color: $gray-light;
      font-weight: $font-weight-light;
      line-height: 2;
    }
  }

  &__image {
    position: relative;
    width:100%;

    @include mq($breakpoint-lg) {
      min-height:480px;
    }

    img {
      height: 100%;
      object-fit: cover;
      width: 100%;

      @include mq($breakpoint-lg) {
        position: absolute;
      }
    }

    &__filter {
      background-color: rgba(0, 0, 0, 0.45);
      height: 100%;
      opacity: .9;
      position: absolute;
      top: 0;
      width: 100%;
    }
  }

  &__with_subtitle {
    padding: $space-xl;

    @include mq($breakpoint-lg) {
      padding: $space-xl*3;
    }

    .content__piece__title {
      color: $gray-darker;
      padding-bottom: $space-lg;

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

    .content__piece__subtitle {
      color: $gray-darker;
      padding-bottom: $space-lg;

      @include mq-only($breakpoint-mob) {
        display: none;
      }
    }

    .content__piece__text {
      color: $gray-light;
    }
  }
}
  • URL: /components/raw/content_piece/_content_piece.scss
  • Filesystem Path: src/components/molecules/content_piece/_content_piece.scss
  • Size: 2 KB

There are no notes for this item.