<div class="secondary-hero">
    <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-leaf-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-leaf-small.jpg 432w, /assets/images/hero-leaf-large.jpg 1420w">
    <div class="secondary-hero__copy">
        <h1 class="secondary-hero__title">Monstera Leaf</h1>
        <p class="secondary-hero__description secondary-hero__description--short">Indulge in 24k luxury</p>
        <p class="secondary-hero__description secondary-hero__description--full">Created on the Hawaiian Islands to make the colors shine, Maui Jim sunglasses feature patented PolarizedPlus2® lens technology for brilliant color so every detail is crisper and cleaner and without glare or harmful UV.</p>
        <button class="button button--primary secondary-hero__call-to-action">Shop Now</button>

    </div>
</div>
<div class="secondary-hero">
  {{#if image}}
  <img class="secondary-hero__image u-object-fit-cover" src="{{image.large.src}}" sizes="(min-width: 1420px) 1420px, {{vw}}vw"
    srcset="{{image.small.src}} {{image.small.width}}w, {{image.large.src}} {{image.large.width}}w">
  {{/if}}
  <div class="secondary-hero__copy">
    {{#if logo}}
    <img class="secondary-hero__logo" src="{{logo.src}}" alt="{{logo.alt}}">
    {{/if}}
    {{#if titleImage}}
    <img class="secondary-hero__title-image" src="{{titleImage.src}}" alt="{{titleImage.alt}}">
    {{/if}}
    {{#if pretitle}}
    <p class="secondary-hero__pretitle">{{pretitle}}</p>
    {{/if}}
    {{#if title}}
    <h1 class="secondary-hero__title">{{title}}</h1>
    {{/if}}
    {{#if subtitle}}
    <h2 class="secondary-hero__subtitle">{{subtitle}}</h2>
    {{/if}}
    {{#if description}}
    <p class="secondary-hero__description secondary-hero__description--short">{{description.short}}</p>
    <p class="secondary-hero__description secondary-hero__description--full">{{description.full}}</p>
    {{/if}}
    {{#each callsToAction}}
    {{render (dynamicVariant 'buttons' modifier) this}}
    {{/each}}
  </div>
</div>
{
  "title": "Monstera Leaf",
  "description": {
    "short": "Indulge in 24k luxury",
    "full": "Created on the Hawaiian Islands to make the colors shine, Maui Jim sunglasses feature patented PolarizedPlus2® lens technology for brilliant color so every detail is crisper and cleaner and without glare or harmful UV."
  },
  "callsToAction": [
    {
      "modifier": "primary",
      "buttonValue": "Shop Now",
      "classes": [
        "secondary-hero__call-to-action"
      ]
    }
  ],
  "image": {
    "small": {
      "src": "/assets/images/hero-leaf-small.jpg",
      "width": "432"
    },
    "large": {
      "src": "/assets/images/hero-leaf-large.jpg",
      "width": "1420"
    },
    "vw": "100"
  }
}
  • Content:
    .secondary-hero {
      position: relative;
    
      &:before {
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: $color-black;
        content: '';
        opacity: .3;
        z-index: 1;
      }
    
      @include breakpoint($page-width-max) {
        // Heros within the restricted main container should have gutters at this
        // width to align with all other content.
        .u-page-width-max & {
          margin: 0 $gutter-width-half;
        }
      }
    }
    
    .secondary-hero,
    .secondary-hero__image {
      @include breakpoint($breakpoint-sm-only) {
        min-height: 300px;
      }
    }
    
    .secondary-hero__copy {
      position: absolute;
      top: 50%;
      right: 20px;
      left: 20px;
      transform: translateY(-50%);
      text-align: center;
      z-index: 2;
    }
    
    .secondary-hero__logo {
      max-width: 50%;
      margin: 0 auto;
    
      @include breakpoint($breakpoint-md) {
        max-width: 25%;
      }
    }
    
    .secondary-hero__title-image {
      max-width: 62.5%;
      margin: 20px auto;
    }
    
    .secondary-hero__pretitle,
    .secondary-hero__title,
    .secondary-hero__subtitle,
    .secondary-hero__description {
      margin: 0;
      color: $color-white;
      font-weight: $font-weight-normal;
      letter-spacing: 1px;
      text-shadow: none;
      text-transform: none;
      -webkit-font-smoothing: antialiased;
    }
    
    .secondary-hero__pretitle {
      margin-bottom: 5px;
      font-size: 1.6rem;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 10px;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .secondary-hero__title {
      font-size: 2.4rem;
      line-height: 2.8rem;
    
      @include breakpoint($breakpoint-md) {
        font-size: 3.8rem;
        line-height: 4.6rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 5.7rem;
        line-height: 6.8rem;
      }
    }
    
    .secondary-hero__subtitle,
    .secondary-hero__description {
      margin-top: 5px;
      font-size: 1.6rem;
      line-height: 1.9rem;
    
      @include breakpoint($breakpoint-md) {
        margin-top: 10px;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .secondary-hero__subtitle {
      @include breakpoint($breakpoint-md) {
        margin-right: 30px;
        margin-left: 30px;
      }
    
      @include breakpoint($breakpoint-xl) {
        max-width: 900px;
        margin-right: auto;
        margin-left: auto;
      }
    }
    
    .secondary-hero__description {
      max-width: 940px;
      margin-right: auto;
      margin-left: auto;
    }
    
    .secondary-hero__description--short {
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .secondary-hero__description--full {
      font-weight: $font-weight-bold;
    
      @include breakpoint($breakpoint-sm-only) {
        display: none;
      }
    }
    
    .secondary-hero__call-to-action {
      margin: 10px 5px 0;
      line-height: 3.0rem;
      box-sizing: border-box;
    
      &:hover {
        color: $color-white;
      }
    
      &.button--outlined {
        border-color: $color-white;
        color: $color-white;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        &.button--outlined {
          line-height: 2.8rem;
        }
      }
    
      @include breakpoint($breakpoint-md) {
        margin: 10px 10px 0;
        line-height: 5.0rem;
    
        &.button--outlined {
          line-height: 4.8rem;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 30px;
      }
    }
    
  • URL: /components/raw/secondary-hero/secondary-hero.scss
  • Filesystem Path: src/components/02-components/hero/secondary-hero/secondary-hero.scss
  • Size: 3.2 KB

There are no notes for this item.