England Football

Full Width Image Signpost: Team Branding 

<section class="fullwidth-imagesignpost">
    <div class="fullwidth-imagesignpost__outer">
        <div class="fullwidth-imagesignpost__infoblock">
            <img src="/assets/example-content/bkgnd-blue.png" />
            <div class="fullwidth-imagesignpost__content">
                <h3>LATEST GRASSROOTS NEWS AND VIDEO</h3>
                <p class="description">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna ligula, imperdiet ac sollicitud</p>
                <a href="/" class="cta cta--primary ">
                    <p>View All</p>
                </a>

            </div>
        </div>
        <div class="fullwidth-imagesignpost__imgwrapper">
            <img src="/assets/example-content/Vector-blue.png" class="fullwidth-imagesignpost__vector" />
            <img src="/assets/example-content/teams-right-image.png" class="fullwidth-imagesignpost__rightimg" />
        </div>
    </div>
</section>

No notes defined.

{
  "heading": "LATEST GRASSROOTS NEWS AND VIDEO",
  "text": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras magna ligula, imperdiet ac sollicitud",
  "imagesolidcolor": "bkgnd-blue",
  "image": "teams-right-image",
  "cropview": "Vector-blue",
  "ctaVisible": true,
  "cta": {
    "copy": "View All",
    "disabled": false
  }
}
  • Content: 
    .fullwidth-imagesignpost {
  &__outer {
    display: flex;
    width: 100%;
    flex-direction: column;
  }
  &__imgwrapper {
    position: relative;
    order: 1;
  }
  &__infoblock {
    position: relative;
    order: 2;
    img {
      width: 100%;
      height: 100%;
    }
  }
  &__content {
    position: absolute;
    z-index: 1;
    top: 8rem;
    color: #fff;
    h3 {
      @extend .heading-1;

      margin-bottom: 1.6rem;
    }
    p {
      @extend .p-1;
    }
    .description {
      margin-bottom: 2rem;
    }
  }
  &__vector {
    position: absolute;
    height: 100%;
    left: -2px;
    bottom: 0;
    top: 0;
    object-fit: contain;
  }
  &__rightimg {
    height: 100%;
    width: 100%;
    object-fit: cover;
  }
  .cta--primary {
    border: none;
    max-width: 100%;
    margin: initial !important;
  }

  @media screen and (max-width: 819px) {
    &__img {
      position: absolute;
    }
    &__infoblock {
      position: relative;
      height: 31.7rem;
    }
    &__content {
      position: absolute;
      top: 0;
      padding: 0 16px;
    }
    &__vector {
      transform: rotate(-90deg) translate(-60%, 35%);
      height: 100vw;
      left: 0;
    }
  }

  @media screen and (min-width: $mq-medium) {
    &__outer {
      flex-direction: row;
      height: 52rem;
    }
    &__imgwrapper {
      width: 100%;
      order: 2;
    }
    &__infoblock {
      width: 100%;
      order: 1;
    }
    &__content {
      transform: translateY(-50%);
      top: 50%;
      max-width: 62rem;
      right: 0;
      margin-left: 1.6rem;
      h3 {
        margin-bottom: 2.4rem;
      }
      .description {
        margin-bottom: 2.4rem;
      }
    }
    .cta--primary {
      max-width: 24.6rem;
    }
  }
}

:root [data-brand='mens'],
:root [data-brand='womens'] {
  .fullwidth-imagesignpost {
    .cta--primary {
      background: var(--brand-secondary);
      border: none;
    }
    .cta--primary:hover {
      background-color: var(--brand-tertiary);
      color: var(--brand-secondary);
    }
  }
}

/* stylelint-disable */
:root [data-brand='womens'] {
  .fullwidth-imagesignpost {
    .cta--primary {
      color: $bold-red;
    }
  }
}
/* stylelint-enable */
  • URL: /components/raw/full-width-image-signpost/full-width-image-signpost.scss
  • Filesystem Path: src/library/components/full-width-image-signpost/full-width-image-signpost.scss
  • Size: 2.2 KB 
<section class="fullwidth-imagesignpost">
  <div class="fullwidth-imagesignpost__outer">
    <div class="fullwidth-imagesignpost__infoblock">
      <img src="/assets/example-content/{{imagesolidcolor}}.png" />
      <div class="fullwidth-imagesignpost__content">
        <h3>{{heading}}</h3>
        <p class="description">{{text}}</p>
        {{render '@cta' cta merge="true"}}
      </div>
    </div>
    <div class="fullwidth-imagesignpost__imgwrapper">
      <img src="/assets/example-content/{{cropview}}.png" class="fullwidth-imagesignpost__vector" />
      <img src="/assets/example-content/{{image}}.png" class="fullwidth-imagesignpost__rightimg" />
    </div>
  </div>
</section>