FTSE Russell Styleguide

Content Section: Title 

<section class="content__block" style="background-color: #F5F5F5;">
    <h3 class="content__block__title">Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit</h3>
    <div class="grid content__block--two_col">
        <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#ico-molecules"></use>
  </svg>
            <span>FTSE Russell provides solutions including advanced data collection, cloud-based applications, desktop analytics and print products. FTSE Russell is a unit of London Stock Exchange Group's (LSEG) information Services Division. FTSE Russell is a wholly owned subsidiary of LSEG.</span>
        </div>

    </div>
</section>
 
<section class="content__block"{% if bg_color %} style="background-color: {{ bg_color }};"{% endif %}{% if bg_image %} style="background-image: url({{ bg_image }});"{% endif %}>
  <h3 class="content__block__title">{{ title }}</h3>
  <div class="grid content__block--two_col">
    {% render '@content_piece--' + left_piece.mods, left_piece %}
    {% render '@content_piece--' + right_piece.mods, right_piece %}
  </div>
</section>
 
{
  "bg_color": "#F5F5F5",
  "title": "Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit",
  "left_piece": {
    "mods": "icon",
    "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"
  },
  "right_piece": {
    "mods": "icon",
    "text": "FTSE Russell provides solutions including advanced data collection, cloud-based applications, desktop analytics and print products. FTSE Russell is a unit of London Stock Exchange Group's (LSEG) information Services Division. FTSE Russell is a wholly owned subsidiary of LSEG.",
    "icon": "ico-molecules"
  }
}
  • 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.