<div class="landing-hero u-page-width-max-gutters">
    <img class="landing-hero__image u-object-fit-cover" src="/assets/images/hero-plp-large.jpg" sizes="(min-width: 1440px) 1420px, (min-width: 769px) calc(100vw - 20px), 100vw" srcset="/assets/images/hero-plp-small.jpg 900w, /assets/images/hero-plp-large.jpg 1420w">
    <h1 class="landing-hero__title">Classic</h1>
</div>
<div class="landing-hero 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": "Classic",
  "image": {
    "small": {
      "src": "/assets/images/hero-plp-small.jpg",
      "width": "900"
    },
    "large": {
      "src": "/assets/images/hero-plp-large.jpg",
      "width": "1420"
    },
    "vw": "100"
  }
}
  • Content:
    // 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;
    
      @include breakpoint($breakpoint-md) {
        height: 200px;
        margin: 0 $gutter-width-half;
      }
    }
    
    .plp-hero__image,
    .landing-hero__image {
      position: absolute;
      z-index: -1;
    }
    
    .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;
    
      @include breakpoint($breakpoint-md) {
        left: $gutter-width;
        width: calc(100% - 40px);
      }
    }
    
  • URL: /components/raw/landing-hero/landing-hero.scss
  • Filesystem Path: src/components/02-components/hero/landing-hero/landing-hero.scss
  • Size: 698 Bytes

There are no notes for this item.