<div class="landing-hero u-page-width-max-gutters">
    <img class="landing-hero__image u-object-fit-cover" src="/assets/images/zeal-hero-plp-large.jpg" sizes="(min-width: 1440px) 1420px, (min-width: 769px) calc(100vw - 20px), 100vw" srcset="/assets/images/zeal-hero-plp-small.jpg 900w, /assets/images/zeal-hero-plp-large.jpg 1420w">
    <h1 class="landing-hero__title">Redeem your gift card</h1>
</div>
<div class="landing-hero{{#each modifiers}} landing-hero--{{ this }}{{/each}} u-page-width-max-gutters">
  {{#if image}}
  <img class="landing-hero__image u-object-fit-cover" src="{{image.large.src}}" sizes="(min-width: 1440px) 1420px, (min-width: 769px) calc(100vw - 20px), 100vw"
    srcset="{{image.small.src}} {{image.small.width}}w, {{image.large.src}} {{image.large.width}}w">
  {{/if}}
  <h1 class="landing-hero__title">{{title}}</h1>
</div>
{
  "title": "Redeem your gift card",
  "image": {
    "small": {
      "src": "/assets/images/zeal-hero-plp-small.jpg",
      "width": "900"
    },
    "large": {
      "src": "/assets/images/zeal-hero-plp-large.jpg",
      "width": "1420"
    },
    "vw": "100"
  }
}
  • Content:
    // Note: This entire stylesheet is served as critical CSS.
    /* critical:start */
    
    // Note:
    //
    // `.plp-hero` and `.plp-hero__*` styles should not be removed without verifying
    // that these classes are no longer in use on production.
    .plp-hero,
    .landing-hero {
      position: relative;
      height: 120px;
      background-color: $color-black;
    
      @include breakpoint($breakpoint-md) {
        height: 200px;
        margin: 0 $gutter-width-half;
      }
    }
    
    .plp-hero__image,
    .landing-hero__image {
      position: absolute;
    }
    
    .plp-hero__title,
    .landing-hero__title {
      position: absolute;
      top: 50%;
      left: $gutter-width-half;
      width: calc(100% - 20px);
      margin: 0;
      transform: translateY(-50%);
      text-align: center;
      text-shadow: 0 4px 6px rgba(0, 0, 0, .8);
    
      @include breakpoint($breakpoint-md) {
        left: $gutter-width;
        width: calc(100% - 40px);
      }
    }
    
    .landing-hero {
      &--overlay {
        &::before {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          background: rgba(0, 0, 0, .4);
          content: '';
          z-index: 1;
    
          @include breakpoint($breakpoint-md) {
            top: 54px;
            left: 80px;
            width: calc(100% - 160px);
            height: calc(100% - 108px);
          }
    
          @include breakpoint($breakpoint-xl) {
            top: 46px;
            left: 60px;
            width: calc(100% - 120px);
            height: calc(100% - 92px);
          }
        }
      }
    
      // this accounts for the pseudo element and the first img tag which is the background image.
      > *:nth-child(n+2) {
        z-index: 2;
      }
    }
    /* critical:end */
    
  • URL: /components/raw/landing-hero/landing-hero.scss
  • Filesystem Path: src/components/02-components/hero/landing-hero/landing-hero.scss
  • Size: 1.6 KB

There are no notes for this item.