England Football

Profile Page Header Banner 

<section class="profile-page-header-banner">
    <picture>
        <source media="(max-width: 744px)" srcset="/assets/example-content/profile-page-header-marble-mob.svg">
        <source media="(max-width: 1280px)" srcset="/assets/example-content/profile-page-header-marble-tab.svg">
        <source media="(min-width: 1280px)" srcset="/assets/example-content/profile-page-header-marble.svg">
        <img class="background-marble" src="/assets/example-content/profile-page-header-marble.svg" alt="">
    </picture>

    <div class="profile-page-header-banner__wrapper">
        <picture>
            <source media="(max-width: 744px)" srcset="/assets/example-content/profile-page-header-left-mob.png">
            <source media="(max-width: 1280px)" srcset="/assets/example-content/profile-page-header-left-tablet.svg">
            <source media="(min-width: 1280px)" srcset="/assets/example-content/profile-page-header-left.svg">
            <img class="left-overlay-image" src="/assets/example-content/profile-page-header-left.svg" alt="">
        </picture>
        <picture>
            <source media="(max-width: 744px)" srcset="/assets/example-content/profile-page-header-right-mob.png">
            <source media="(max-width: 1280px)" srcset="/assets/example-content/profile-page-header-right-tablet.svg">
            <source media="(min-width: 1280px)" srcset="/assets/example-content/profile-page-header-right.svg">
            <img class="right-overlay-image" src="/assets/example-content/profile-page-header-right.svg" alt="">
        </picture>
    </div>
    <div class="profile-page-header-banner__overlay">
        <div class="profile-page-header-banner__content">
            <div class="profile-page-header-banner__content--logo">
                <img src=/assets/example-content/profile-page-header-logo.svg>
            </div>
            <div class="profile-page-header-banner__content--heading">
                <div class="profile-page-header-banner__content--heading__title">
                    <span>England Supporters Travel Club</span>
                </div>
                <div class="profile-page-header-banner__content--heading__subtitle">
                    <span>Gareth Young | 3453245432523 | Member since 2016</span>
                    <span>Exclusive access to away and tournament fixtures</span>
                    <span>Exclusive entry to competitions, e-newsletters and much more</span>
                </div>
                <div class="profile-page-header-banner__content--heading__btn">
                    <a href="/" class="cta cta--r-primary ">
                        <p>Get Membership</p>
                    </a>

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

No notes defined.

{
  "leftOverlayImageMob": "/assets/example-content/profile-page-header-left-mob.png",
  "rightOverlayImageMob": "/assets/example-content/profile-page-header-right-mob.png",
  "leftOverlayImageTab": "/assets/example-content/profile-page-header-left-tablet.svg",
  "rightOverlayImageTab": "/assets/example-content/profile-page-header-right-tablet.svg",
  "leftOverlayImageDes": "/assets/example-content/profile-page-header-left.svg",
  "rightOverlayImageDes": "/assets/example-content/profile-page-header-right.svg",
  "backgroundMarbleDes": "/assets/example-content/profile-page-header-marble.svg",
  "backgroundMarbleMob": "/assets/example-content/profile-page-header-marble-mob.svg",
  "backgroundMarbleTab": "/assets/example-content/profile-page-header-marble-tab.svg",
  "englandLogo": "/assets/example-content/profile-page-header-logo.svg",
  "title": {
    "copy": "England Supporters Travel Club"
  },
  "name": {
    "copy": "Gareth Young"
  },
  "fan": {
    "copy": "3453245432523"
  },
  "member": {
    "copy": "Member since 2016"
  },
  "subTitle-1": {
    "copy": "Exclusive access to away and tournament fixtures"
  },
  "subTitle-2": {
    "copy": "Exclusive entry to competitions, e-newsletters and much more"
  },
  "btn-1": {
    "copy": "Get Membership"
  }
}
  • Content: 
    .profile-page-header-banner {
  overflow: hidden;
  position: relative;
  height: 525px;

  &::before {
    z-index: 2;
    content: '';
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.9);
  }
  .background-marble {
    z-index: 1;
    position: absolute;
    height: 650px;
    width: 100%;
  }

  &__overlay {
    width: 100%;
    max-width: 122.7rem;
    position: absolute;
    top: 92px;
    left: 0;
    right: 0;
    display: flex;
    margin: 0 auto;
    z-index: 2;
    :has(.profile-page-header-banner__content--heading__btn) {
      top: -15px;
    }
  }
  &__content {
    display: flex;
    width: 100%;
    max-width: 960px;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    position: relative;
    flex-direction: column;
    &--logo {
      background-size: 64px 64px;
      width: 64px;
      height: 64px;
      margin-bottom: 18px;
    }
    &--heading {
      padding: 8px 24px;
      background-color: rgba(255, 255, 255, 0.8);
      margin-bottom: 88px;
      &__title {
        color: #011e41;
        font-family: 'England FC', arial, helvetica, sans-serif;
        font-size: 98px;
        font-weight: 400;
        line-height: 84px;
        letter-spacing: 0.02em;
        text-align: center;
      }
      &__subtitle {
        display: flex;
        flex-direction: column;
        margin-top: 8px;
        color: #5b6885;
        font-family: 'Grot12', arial, helvetica, sans-serif;
        font-size: 18px;
        font-weight: 600;
        line-height: 40px;
        justify-content: center;
        letter-spacing: -0.01em;
        text-align: center;
        &:has(:nth-child(2)) {
          margin-top: 24px;
        }
      }
      &__btn {
        display: flex;
        justify-content: center;
        margin-top: 24px;
        .cta--r-primary {
          width: 285px;
          height: 44px;
          padding: 8px 98px 8px 98px;
          gap: 10px;
          border-radius: 2px;
          font-family: 'FS Dillon', arial, helvetica, sans-serif;
          font-size: 14px;
          font-weight: 400;
          line-height: 27.72px;
          letter-spacing: 0.01em;
          text-align: center;
          &:hover {
            background-color: $crest-blue;
            color: white;
          }
        }
      }
    }
  }
  &__wrapper {
    z-index: 2;
    min-height: 52.5rem;
    justify-content: center;
    margin: 0 auto;
    position: relative;
    &::after {
      content: '';
      display: block;
      position: absolute;
      bottom: 0;
      left: 0;
      width: 100%;
      height: 181px;
    }
    picture {
      display: flex;
      flex-direction: row;
      width: 100%;
      .left-overlay-image {
        position: absolute;
        display: block;
        height: 525px;
        top: 0;
        left: 0;
      }
      .right-overlay-image {
        position: absolute;
        display: block;
        height: 525px;
        top: 0;
        right: 0;
      }
    }
  }

  @include xs {
    .background-marble {
      height: 650px;
    }
    &__wrapper {
      &::after {
        height: 245px;
        background-image: url('./assets/example-content/background_rectangle.svg');
      }
    }
    &__overlay {
      top: 56px;
    }
    &__content {
      margin: 0 20px;
      &--logo {
        background-size: 47px 47px;
        width: 47px;
        height: 47px;
        margin-bottom: 26px;
      }
      &--heading {
        background-color: rgba(255, 255, 255, 0.9);
        &__title {
          font-size: 56px;
          line-height: 47px;
        }
        &__subtitle {
          font-size: 16px;
          flex-wrap: wrap;
          line-height: 24px;
          &:has(:nth-child(2)) {
            font-size: 18px;
          }
        }
      }
    }
  }

  @include sm {
    .background-marble {
      height: 650px;
    }
    &__wrapper {
      &::after {
        height: 100px;
        background-image: url('./assets/example-content/background_rectangle.svg');
      }
    }
    &__content {
      &--logo {
        background-size: 54px 54px;
        width: 54px;
        height: 54px;
      }
      &--heading {
        background-color: rgba(255, 255, 255, 0.9);
        &__title {
          font-size: 66px;
          line-height: 50px;
        }
      }
    }
  }
}
  • URL: /components/raw/profile-page-header-banner/profile-page-header-banner.scss
  • Filesystem Path: src/library/modules/profile-page/profile-page-header-banner/profile-page-header-banner.scss
  • Size: 4.4 KB 
<section class="profile-page-header-banner">
    <picture>
        <source media="(max-width: 744px)" srcset="{{backgroundMarbleMob}}">
        <source media="(max-width: 1280px)" srcset="{{backgroundMarbleTab}}">
        <source media="(min-width: 1280px)" srcset="{{backgroundMarbleDes}}">
        <img class="background-marble" src="{{backgroundMarbleDes}}" alt="">
    </picture>

    <div class="profile-page-header-banner__wrapper">
        <picture>
            <source media="(max-width: 744px)" srcset="{{leftOverlayImageMob}}">
            <source media="(max-width: 1280px)" srcset="{{leftOverlayImageTab}}">
            <source media="(min-width: 1280px)" srcset="{{leftOverlayImageDes}}">
            <img class="left-overlay-image" src="{{leftOverlayImageDes}}" alt="">
        </picture>
        <picture>
            <source media="(max-width: 744px)" srcset="{{rightOverlayImageMob}}">
            <source media="(max-width: 1280px)" srcset="{{rightOverlayImageTab}}">
            <source media="(min-width: 1280px)" srcset="{{rightOverlayImageDes}}">
            <img class="right-overlay-image" src="{{rightOverlayImageDes}}" alt="">
        </picture>
        </div>
        <div class="profile-page-header-banner__overlay">
            <div class="profile-page-header-banner__content">
                <div class="profile-page-header-banner__content--logo">
                    <img src={{englandLogo}}>
                </div>
                <div class="profile-page-header-banner__content--heading">
                    <div class="profile-page-header-banner__content--heading__title">
                        <span>{{title.copy}}</span>
                    </div>
                    <div class="profile-page-header-banner__content--heading__subtitle">
                        <span>{{name.copy}} | {{fan.copy}} | {{member.copy}}</span>
                        {{!-- <span>Priority access and discount to England home tickets</span> --}}
                        <span>{{subTitle-1.copy}}</span>
                        <span>{{subTitle-2.copy}}</span>
                    </div>
                    <div class="profile-page-header-banner__content--heading__btn">
                        {{render '@cta--r-primary' btn-1 merge="true"}}
                    </div>
                </div>
            </div>
        </div>
</section>