FTSE Russell Styleguide

Content Section 

<div class="content__block" style="background-image: url(../../assets/images/content-section-bg.png);">
    <div class="grid content__block--two_col">
        <div class="content__piece__headline">

            <div class="huge" style="color: white;">$15</div>

            <h2 class="h1" style="color: white; text-transform: uppercase;">Trillion</h2>

            <h5>Currently benchmarked to FTSE<br>Russell indexes</h5>

        </div>

        <div class="content__piece" style="color: white;">
            <h3 class="content__piece__title">A leading global provider of benchmarks, analytics, and data solutions with multi-asset capabilities</h3>
            <p class="content__piece__text">FTSE Russell's expertise and products are used extensively by institutional and retail investors globally. Approximately $15 trillion is currently benchmarked to FTSE Russell indexes. For over 30 years, leading asset owners, asset managers.
                ETF providers, and investment banks have chosen FTSE Russell indexes to benchmark their investment performance and create investment funds, ETFs, structured products and index-based derivatives. FTSE Russell indexes also provide clients
                with tools for asset allocation, investment strategy analysis and risk management.</p>
        </div>

    </div>
</div>
 
<div class="content__block{% if full_width %} full_width{% endif %}"{% if bg_color %} style="background-color: {{ bg_color }};"{% endif %}{% if bg_image %} style="background-image: url({{ bg_image }});"{% endif %}>
  <div class="grid content__block--two_col{% if switch_col %} switch__col{% endif %}">
    {% render '@content_piece--' + left_piece.mods, left_piece %}
    {% render '@content_piece--' + right_piece.mods, right_piece %}
  </div>
</div>
 
/* No context defined for this component. */
  • Content: 
    .content__block {
  background-position: center;
  background-size: cover;
  padding: $space-xl $space-md;

  @include mq($breakpoint-lg) {
    padding: ($space-xxl*2) $space-md;
  }

  &--two_col {
    grid-row-gap: $space-xl;
    grid-template-columns: 1fr;
    margin: 0 auto;
    max-width: $breakpoint-xxl;

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

    &.switch__col {

      div:first-child {

        @include mq($breakpoint-lg) {
          order: 1;
        }
      }
    }

    & > div {
      flex-basis: 100%;

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

      &.content__piece__image {
        @include mq($breakpoint-lg) {
          flex-basis: 50%;
          padding: 0;
        }
      }
    }
  }

  &__title {
    color: $primary-dark;
    font-weight: $font-weight-normal;
    margin: 0 auto;
    padding-bottom: $space-xxl;
    text-align: center;

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

  &.full_width {
    padding: 0;

    .content__block--two_col {
      grid-gap: 0;
      max-width: 100%;
    }

    .content__piece {
      padding: $space-xl;

      @include mq($breakpoint-lg) {
        flex-basis: calc(50% - 12rem);
        padding: $space-xl*3;
      }
    }
  }
}
  • URL: /components/raw/content_section/_content_section.scss
  • Filesystem Path: src/components/molecules/content_section/_content_section.scss
  • Size: 1.3 KB

There are no notes for this item.