England Football

Efl Hero Banner: 3 Line Copy 

<section class="efl-hero-banner session" data-behavior="efl-hero-banner">
    <div class="efl-hero-banner__wrapper">
        <picture>
            <source media="(max-width: 819px)" srcset="/assets/example-content/hero-banner-2.jpg">
            <source media="(min-width: 820px)" srcset="/assets/example-content/hero-banner-1.jpg">
            <img src="/assets/example-content/hero-banner-1.jpg" alt="">
        </picture>
        <div class="efl-hero-banner__overlay">
            <div class="efl-hero-banner__overlay--wrapper">
                <div class="category-tag">SESSIONS</div>
                <h1><span class="jumpTohide">Receiving under pressure</span></h1>
                <div class="efl-hero-banner-copy">
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi tincidunt, sit amet blandit ante commodo. Integer efficitur velit non mi tincidunt, sit amet blandit ante commodo.Integer efficitur velit non mi tincidunt, sit amet blandit ante commodo.Integer efficitur velit non mi tincidunt, sit amet blandit ante commodo.
                </div>
                <div class="efl-hero-banner-cta">
                    <a href="/" class="cta cta--primary ">
                        <p>Primary CTA</p>
                    </a>

                </div>
            </div>
        </div>
    </div>
</section>

No notes defined.

{
  "smallimage": "/assets/example-content/hero-banner-2.jpg",
  "bigimage": "/assets/example-content/hero-banner-1.jpg",
  "hero-type": "session",
  "tag": "SESSIONS",
  "title": "Receiving under pressure",
  "copy": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer efficitur velit non mi tincidunt, sit amet blandit ante commodo. Integer efficitur velit non mi tincidunt, sit amet blandit ante commodo.Integer efficitur velit non mi tincidunt, sit amet blandit ante commodo.Integer efficitur velit non mi tincidunt, sit amet blandit ante commodo."
}
  • Content: 
    export default parentElement => {
  const title = parentElement.querySelector('h1');
  const copy = parentElement.querySelector('.efl-hero-banner-copy');
  const heroClass = parentElement.classList.value.replace(
    'efl-hero-banner ',
    ''
  );
  const cta = parentElement.querySelector('.cta');

  document.body.classList.add(heroClass);

  // title style change
  if (title && title.innerText.length > 36) {
    title.classList.add('h2-style');
  } else if (title) {
    title.classList.remove('h2-style');
  }

  // Truncate title text
  if (title && title.innerText.length > 75) {
    title.innerHTML = `${title.innerText.substr(0, 74)}&hellip;`;
  }

  // Truncate copy text
  if (copy && copy.innerText.length > 160) {
    copy.innerHTML = `${copy.innerText.substr(0, 159)}&hellip;`;
  }

  if (cta) {
    copy.classList.add('cta');
  }
};
  • URL: /components/raw/efl-hero-banner/efl-hero-banner.js
  • Filesystem Path: src/library/components/efl-hero-banner/efl-hero-banner.js
  • Size: 850 Bytes
  • Content: 
    .efl-hero-banner {
  background-color: #144192;
  position: relative;
  height: 20.5rem;
  &__wrapper {
    max-width: 174rem;
    min-height: 65.7rem;
    justify-content: center;
    margin: 0 auto;
    position: relative;
  }

  &::before {
    content: '';
    background: url('./assets/images/hero-banner-left-shape-mob.png') no-repeat
      center;
    position: absolute;
    display: block;
    width: 6.9rem;
    height: 7.6rem;
    z-index: 1;
  }
  &::after {
    content: '';
    background: url('./assets/images/hero-banner-right-shape-mob.png') no-repeat
      center;
    position: absolute;
    display: block;
    width: 24.5rem;
    height: 16.2rem;
    right: 0;
    bottom: -1.6rem;
    z-index: 1;
  }

  &__overlay {
    width: 100%;
    max-width: 119.5rem;
    position: initial;
    top: 0;
    left: 0;
    right: 0;
    display: flex;
    margin: 0 auto;
    z-index: 2;
    &--wrapper {
      position: relative;
      max-width: 58.1rem;
      font-family: $text-font-ef;
      color: $white;
      margin-top: 3.6rem;
      padding: 0 3.2rem;
      .category-tag {
        font-size: 1.2rem;
        line-height: 1.2rem;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        &::after {
          content: '';
          border-bottom: 0.2rem solid $red;
          display: block;
          margin-top: 0.8rem;
          width: 3.2rem;
        }
      }
      h1 {
        font-size: 4.4rem;
        line-height: 4.4rem;
        letter-spacing: -0.01em;
        font-weight: 700;
        margin-top: 0.8rem;
        &.h2-style {
          font-size: 3.2rem;
          line-height: 3.6rem;
        }
      }
      .efl-hero-banner-copy {
        font-size: 1.8rem;
        line-height: 2.4rem;
        color: $light-blue;
        margin-top: 0.8rem;

        @extend .p-medium;

        @include text-limit(2);
      }
      .efl-hero-banner-cta {
        display: none;
        margin-top: 2.4rem;
        .cta--primary {
          background-color: $red;
          border: none;
          max-width: 35rem;
          &:hover {
            color: $red;
            background-color: $white;
          }
          &:focus-visible,
          &:focus {
            outline: auto;
            outline-color: $white;
            outline-style: auto;
          }
        }
      }
    }
  }
  img {
    height: 20.5rem;
    object-fit: cover;
    width: 100%;
  }
  &.session,
  &.sessions,
  &.courses {
    min-height: 65.7rem;
    height: unset;
    &::before,
    &::after {
      display: none;
    }
    img {
      position: absolute;
      height: 100%;
      z-index: 0;
      top: 0;
      left: 0;
      right: 0;
    }
  }
  &.without-image {
    background-color: $white;
    &::before {
      background: url('./assets/images/hero-banner-no-image-shape-left-mob.png')
        no-repeat center;
      width: 20.5rem;
      height: 6.3rem;
      top: 0;
    }
    &::after {
      background: url('./assets/images/hero-banner-no-image-shape-right-mob.png')
        no-repeat center;
      width: 5.5rem;
      height: 8.2rem;
      top: 13.5rem;
      right: 0;
      bottom: initial;
    }
  }
  &.article-session-index {
    min-height: 16rem;
    height: 16rem;
    &::before {
      background: url('./assets/images/hero-banner-index-mob-left-zig-zag.png')
        no-repeat center;
      height: 16rem;
      width: 8rem;
      background-size: cover;
    }
    &::after {
      background: url('./assets/images/hero-banner-index-mob-right-zig-zag.png')
        no-repeat center;
      height: 16rem;
      bottom: 0;
      background-size: cover;
      width: 8rem;
    }
    .efl-hero-banner__wrapper {
      min-height: 16rem;
      max-width: 100%;
      &::before {
        content: '';
        background-image: url('./assets/images/noise.png');
        background-repeat: repeat;
        mix-blend-mode: soft-light;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        pointer-events: none;
      }
    }
    .efl-hero-banner__overlay--wrapper {
      margin: 0 auto;
      margin-top: 3.4rem;
      text-align: center;
      padding: 0 6rem;
      .category-tag {
        display: none;
      }
      h1 {
        @extend .heading-2;

        font-size: 3.2rem;
        font-style: normal;
        line-height: 3.6rem;
        margin-top: 0;
      }
      .efl-hero-banner-copy {
        @extend .p-medium;

        font-size: 1.8rem;
        line-height: 2.4rem;
      }
    }
  }

  /* @media screen and (min-width: 768px) {
    height: 43.1rem;
    img {
      height: 43.1rem;
    }
    &::before {
      background: url('./assets/images/hero-banner-left-shape.png') no-repeat
        center;
      width: 21rem;
      height: 43.1rem;
      bottom: -6.1rem;
      background-size: contain;
    }
    &::after {
      background: url('./assets/images/hero-banner-right-shape.png') no-repeat
        center;
      width: 31rem;
      height: 47.2rem;
      top: 12.7rem;
      bottom: initial;
      background-size: contain;
    }
    &.without-image {
      &::before {
        background: url('./assets/images/hero-banner-no-image-shape-left.png')
          no-repeat center;
        width: 20.9rem;
        height: 51.7rem;
        top: 0;
        background-size: contain;
      }
      &::after {
        background: url('./assets/images/hero-banner-no-image-shape-right.png')
          no-repeat center;
        width: 34.2rem;
        height: 43.7rem;
        top: 0;
        bottom: initial;
        background-size: contain;
      }
    }
  } */

  // For Mobile
  @media screen and (min-width: $mq-medium) {
    height: 61.1rem;
    &::before {
      background: url('./assets/images/hero-banner-left-shape.png') no-repeat
        center;
      width: 39rem;
      height: 57.3rem;
      bottom: 0;
    }
    &::after {
      background: url('./assets/images/hero-banner-right-shape.png') no-repeat
        center;
      width: 32.3rem;
      height: 47.2rem;
      top: 30.5rem;
      bottom: initial;
    }
    img {
      height: 61.1rem;
    }
    &__overlay {
      // padding: 0;
      &--wrapper {
        padding: 0;
        .efl-hero-banner-copy {
          max-width: 37rem;

          @include text-limit(3);
        }

        margin-top: 12.7rem;
        margin-bottom: 22.6rem;
        .category-tag {
          font-size: 1.6rem;
          line-height: 2rem;
          letter-spacing: 0.06em;
        }
        h1 {
          font-size: 8.5rem;
          line-height: 7.7rem;
          &.h2-style {
            font-size: 4.2rem;
            line-height: 4rem;
          }
        }
        .efl-hero-banner-cta {
          .cta--primary {
            max-width: 31.1rem;
          }
        }
      }
    }
    &.without-image {
      &::before {
        background: url('./assets/images/hero-banner-no-image-shape-left.png')
          no-repeat center;
        width: 20.9rem;
        height: 51.7rem;
        top: 0;
      }
      &::after {
        background: url('./assets/images/hero-banner-no-image-shape-right.png')
          no-repeat center;
        width: 34.2rem;
        height: 43.7rem;
        top: 0;
        bottom: initial;
      }
    }
    &.article-session-index {
      min-height: 19.6rem;
      height: 19.6rem;
      background-color: $crest-blue;
      &::before {
        height: 19.6rem;
        background-size: cover;
        width: 9rem;
      }
      &::after {
        height: 19.6rem;
        background-size: cover;
        top: 0;
        width: 10rem;
      }
      .efl-hero-banner__wrapper {
        min-height: 19.6rem;
      }
      .efl-hero-banner__overlay--wrapper {
        max-width: 58.5rem;
        margin: 0 auto;
        margin-top: 3.4rem;
        h1 {
          font-size: 4.2rem;
          line-height: 4rem;
        }
        .efl-hero-banner-copy {
          max-width: 100%;
        }
      }
    }
  }

  @media screen and (min-width: $mq-large) {
    &.article-session-index {
      &::before {
        background: url('./assets/images/hero-banner-index-left-zig-zag.png')
          no-repeat center;
        height: 19.6rem;
        background-size: cover;
        width: 39rem;
      }
      &::after {
        background: url('./assets/images/hero-banner-index-right-zig-zag.png')
          no-repeat center;
        height: 19.6rem;
        background-size: cover;
        top: 0;
        width: 38rem;
      }
    }
  }

  @media screen and (min-width: 1740px) {
    &.session,
    &.sessions,
    &.courses {
      &::before {
        content: '';
        background-image: url('./assets/images/noise.png');
        background-repeat: repeat;
        mix-blend-mode: soft-light;
        width: 100%;
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        display: block;
        opacity: 0.3;
        pointer-events: none;
      }
      .efl-hero-banner__wrapper {
        &::after {
          content: '';
          background: linear-gradient(
            270deg,
            #144192 0%,
            rgba(0, 67, 151, 0) 100%
          );
          height: 100%;
          width: 12.5rem;
          top: 0;
          right: -0.2rem;
          position: absolute;
        }
        &::before {
          content: '';
          background: linear-gradient(
            90deg,
            #144192 0%,
            rgba(0, 67, 151, 0) 100%
          );
          height: 100%;
          width: 12.5rem;
          top: 0;
          left: -0.2rem;
          position: absolute;
        }
      }
    }
  }

  @media screen and (min-width: $mq-medium) and (max-width: 1200px) {
    .efl-hero-banner__overlay--wrapper {
      padding: 0 3.2rem;
    }
  }
}
  • URL: /components/raw/efl-hero-banner/efl-hero-banner.scss
  • Filesystem Path: src/library/components/efl-hero-banner/efl-hero-banner.scss
  • Size: 9.7 KB 
<section class="efl-hero-banner {{hero-type}}" data-behavior="efl-hero-banner">
    <div class="efl-hero-banner__wrapper">
        {{#unless image-hide}}
        <picture>
            <source media="(max-width: 819px)" srcset="{{smallimage}}">
            <source media="(min-width: 820px)" srcset="{{bigimage}}">
            <img src="{{bigimage}}" alt="">
        </picture>
        {{/unless}}
        {{#unless hide-overlay}}
        <div class="efl-hero-banner__overlay">
            <div class="efl-hero-banner__overlay--wrapper">
                {{#unless index-page}}
                <div class="category-tag">{{tag}}</div>
                {{/unless}}
                <h1><span class="jumpTohide">{{title}}</span></h1>
                <div class="efl-hero-banner-copy">
                    {{copy}}
                </div>
                {{#unless index-page}}
                <div class="efl-hero-banner-cta">
                    {{render '@cta'}}
                </div>
                {{/unless}}
            </div>
        </div>
        {{/unless}}
    </div>
</section>