<div class="secondary-hero ">
    <img class="secondary-hero__image u-object-fit-cover" src="/assets/images/hero-prescription-1-large.jpg" sizes="(min-width: 1420px) 1420px, vw" srcset="/assets/images/hero-prescription-1-small.jpg 432w, /assets/images/hero-prescription-1-large.jpg 1420w">
    <div class="secondary-hero__copy-wrapper">
        <div class="secondary-hero__copy">
            <p class="secondary-hero__pretitle">Find Your Style</p>
            <h1 class="secondary-hero__title">95% of Our Sunglasses are Available in Prescription</h1>
            <div class="secondary-hero__calls-to-action-wrapper">
                <div class="call-to-action call-to-action--primary">
                    <a class="call-to-action__button button button--outlined secondary-hero__call-to-action" href="#">
    Browse sunglasses
  </a>
                </div>

                <div class="call-to-action call-to-action--primary">
                    <a class="call-to-action__button button button--outlined secondary-hero__call-to-action" href="#">
    Browse new arrivals
  </a>
                </div>

            </div>
        </div>
    </div>
</div>
<div class="secondary-hero {{#each modifiers}} secondary-hero--{{ this }}{{/each}}">
  {{#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-wrapper">
    {{#if logo}}
      <img class="secondary-hero__logo" src="{{logo.src}}" alt="{{logo.alt}}">
    {{else}}
    <div class="secondary-hero__copy">
      {{#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}}
      <div class="secondary-hero__calls-to-action-wrapper">
        {{#each callsToAction}}
        {{render (dynamicComponent component) context merge=true}}
        {{/each}}
      </div>
    </div>
    {{/if}}
  </div>
</div>
{
  "title": "95% of Our Sunglasses are Available in Prescription",
  "pretitle": "Find Your Style",
  "image": {
    "small": {
      "src": "/assets/images/hero-prescription-1-small.jpg",
      "width": "432"
    },
    "large": {
      "src": "/assets/images/hero-prescription-1-large.jpg",
      "width": "1420"
    },
    "vw": "100"
  },
  "callsToAction": [
    {
      "component": "call-to-action",
      "context": {
        "buttonVariant": "outlined",
        "modifier": "primary",
        "label": false,
        "buttonValue": "Browse sunglasses",
        "classes": [
          "secondary-hero__call-to-action"
        ]
      }
    },
    {
      "component": "call-to-action",
      "context": {
        "buttonVariant": "outlined",
        "modifier": "primary",
        "label": false,
        "buttonValue": "Browse new arrivals",
        "classes": [
          "secondary-hero__call-to-action"
        ]
      }
    }
  ]
}
  • Content:
    // Note: This entire stylesheet is served as critical CSS.
    /* critical:start */
    .secondary-hero {
      position: relative;
    
      &::before {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .3);
        content: '';
      }
    
      .call-to-action {
        display: flex;
        justify-content: center;
      }
    
      @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-wrapper {
      display: flex;
      position: absolute;
      top: 0;
      left: 0;
      flex-direction: column;
      width: 100%;
      height: 100%;
    
      @include breakpoint($breakpoint-md) {
        align-items: center;
        justify-content: center;
      }
    }
    
    .secondary-hero__copy {
      display: flex;
      flex-direction: column;
      text-align: center;
    
      @include breakpoint($breakpoint-sm-only) {
        flex-grow: 1;
        justify-content: center;
        padding: 0 20px;
      }
    
      @include breakpoint($breakpoint-md) {
        max-width: 86%;
        margin: 0 28px;
        padding: 16px 20px;
      }
    
      @include breakpoint($breakpoint-lg) {
        max-width: 80%;
        margin: 0 40px;
        padding: 24px 40px;
      }
    
      @include breakpoint($breakpoint-xl) {
        max-width: 71%;
        margin: 0 164px;
      }
    
      .secondary-hero--overlay & {
        background: rgba(0, 0, 0, .4);
      }
    }
    
    .secondary-hero--logo {
      .secondary-hero__copy-wrapper {
        justify-content: center;
      }
    
      .secondary-hero__logo {
        max-width: 48%;
        margin: 0 auto;
    
        @include breakpoint($breakpoint-md) {
          max-width: 24%;
        }
      }
    }
    
    .secondary-hero__title-image {
      margin: 20px auto;
    }
    
    .secondary-hero__pretitle,
    .secondary-hero__title,
    .secondary-hero__subtitle,
    .secondary-hero__description {
      @include font-normal;
      margin: 0;
      color: $color-white;
      letter-spacing: $base-letter-spacing;
      text-shadow: 0 4px 6px rgba(0, 0, 0, .8);
      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 {
      @include font-bold;
    
      @include breakpoint($breakpoint-sm-only) {
        display: none;
      }
    }
    
    .secondary-hero__call-to-action {
      align-self: center;
      margin: 1rem 0 0;
      line-height: 3.0rem;
      text-overflow: unset;
      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) {
        line-height: 5.0rem;
    
        &.button--outlined {
          line-height: 4.8rem;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 30px;
    
        &.call-to-action__button {
          width: auto;
        }
    
        &.call-to-action__button.button--outlined {
          width: inherit;
        }
      }
    }
    
    .secondary-hero__calls-to-action-wrapper {
      display: flex;
      flex-direction: column;
      justify-content: center;
    
      @include breakpoint($breakpoint-md) {
        flex-direction: row;
    
        .call-to-action {
          margin: 0 5px;
        }
      }
    }
    /* critical:end */
    
  • URL: /components/raw/secondary-hero/secondary-hero.scss
  • Filesystem Path: src/components/02-components/hero/secondary-hero/secondary-hero.scss
  • Size: 4.5 KB

There are no notes for this item.