FTSE Russell Styleguide

Content Piece: With Subtitle 

<div class="content__piece content__piece__with_subtitle">
    <h3 class="content__piece__title">Duis mollis, est non commodo luctus, nisi erat porttitor ligula</h3>
    <h4 class="content__piece__subtitle">Duis mollis, est non commodo luctus, nisi erat porttitor ligula</h4>
    <p class="content__piece__text">With the recent addition of The Yield Book business. FTSE Russell extends its expertise in analytics to a highly respected analytics platform that serves approximately 350 institutions globally including investment management firms, banks, central
        banks, insurance companies, pension funds, broker-dealers, hedge funds and investment management firms. The Yield Book offers analytical insights into a broad array of fixed income instruments with specific focus on mortgage, government, corporate
        and derivative securities.</p>
</div>
 
<div class="content__piece content__piece__with_subtitle"  {% if color %}style="color: {{ color }};"{% endif %}>
  <h3 class="content__piece__title">{{ title }}</h3>
  <h4 class="content__piece__subtitle">{{ subtitle }}</h4>
  <p class="content__piece__text">{{ text }}</p>
</div>
 
{
  "title": "Duis mollis, est non commodo luctus, nisi erat porttitor ligula",
  "subtitle": "Duis mollis, est non commodo luctus, nisi erat porttitor ligula",
  "text": "With the recent addition of The Yield Book business. FTSE Russell extends its expertise in analytics to a highly respected analytics platform that serves approximately 350 institutions globally including investment management firms, banks, central banks, insurance companies, pension funds, broker-dealers, hedge funds and investment management firms. The Yield Book offers analytical insights into a broad array of fixed income instruments with specific focus on mortgage, government, corporate and derivative securities.",
  "mods": "with-subtitle"
}
  • 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.