FTSE Russell Styleguide

Content Piece: Image 

<div class="content__piece__image">
    <img src="../../assets/images/Great-Wall-China-HD.jpeg">
    <div class="content__piece__image__filter"></div>
</div>
 
<div class="content__piece__image">
  <img src="{{ src_image }}">
  <div class="content__piece__image__filter"></div>
</div>
 
{
  "src_image": "../../assets/images/Great-Wall-China-HD.jpeg"
}
  • 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.