FTSE Russell Styleguide

Content Piece: Headline 

<div class="content__piece__headline bg__img" style="background-image: url(../../assets/images/content-piece-bg.png);">

    <h2 class="h1" style="color: #f8af5f;">350 Global<br>Institutions</h2>

    <h5>Served by FTSE Russell</h5>

</div>
 
<div class="content__piece__headline{% if bg_image %} bg__img{% endif %}"{% if bg_image %} style="background-image: url({{ bg_image }});"{% endif %}>
  {% if huge.text %}
  <div class="huge"{% if huge.color %} style="color: {{ huge.color }};"{% endif %}>{{ huge.text }}</div>
  {% endif %}
  {% if h1.text %}
  <h2 class="h1" style="{% if h1.color %}color: {{ h1.color }};{% endif %}{% if h1.transform %} text-transform: {{ h1.transform }};{% endif %}">{{ h1.text }}</h2>
  {% endif %}
  {% if h5 %}
  <h5>{{ h5 }}</h5>
  {% endif %}
</div>
 
{
  "h1": {
    "text": "350 Global<br>Institutions",
    "color": "#f8af5f"
  },
  "h5": "Served by FTSE Russell",
  "bg_image": "../../assets/images/content-piece-bg.png"
}
  • 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.