<div class="multi-image-hero u-page-width-max">
    <div class="multi-image-hero__image-wrapper">
        <div class="multi-image-hero__image-inner">
            <img class="multi-image-hero__image" src="/assets/images/hero-multi-image-1.jpg" alt="A view of palm trees against a blue sky appears crisp and clear from edge to edge.">
            <h2 class="multi-image-hero__image-title">MauiPassport Lens</h2>
        </div>
        <p class="multi-image-hero__image-description">MauiPassport gives you distortion-free clarity across the entire lens. PolarizedPlus2 provides brilliant color without glare or harmful UV rays.</p>
    </div>
    <div class="multi-image-hero__image-wrapper">
        <div class="multi-image-hero__image-inner">
            <img class="multi-image-hero__image" src="/assets/images/hero-multi-image-2.jpg" alt="A view of palm trees against a blue sky is distorted and appears progressively more out-of-focus towards the bottom of the image.">
            <h2 class="multi-image-hero__image-title">Conventional Rx Lens</h2>
        </div>
        <p class="multi-image-hero__image-description">For comparative field of view.</p>
    </div>
</div>
<div class="multi-image-hero{{#each modifiers}} multi-image-hero--{{ this }}{{/each}} u-page-width-max">
  {{#each images}}
  <div class="multi-image-hero__image-wrapper">
    <div class="multi-image-hero__image-inner">
      <img class="multi-image-hero__image" src="{{src}}" alt="{{altText}}">
      <h2 class="multi-image-hero__image-title">{{title}}</h2>
    </div>
    {{#if description}}
    <p class="multi-image-hero__image-description">{{description}}</p>
    {{/if}}
  </div>
  {{/each}}
</div>
{
  "images": [
    {
      "src": "/assets/images/hero-multi-image-1.jpg",
      "title": "MauiPassport Lens",
      "altText": "A view of palm trees against a blue sky appears crisp and clear from edge to edge.",
      "description": "MauiPassport gives you distortion-free clarity across the entire lens. PolarizedPlus2 provides brilliant color without glare or harmful UV rays."
    },
    {
      "src": "/assets/images/hero-multi-image-2.jpg",
      "title": "Conventional Rx Lens",
      "altText": "A view of palm trees against a blue sky is distorted and appears progressively more out-of-focus towards the bottom of the image.",
      "description": "For comparative field of view."
    }
  ]
}
  • Content:
    // Note: This entire stylesheet is served as critical CSS.
    /* critical:start */
    .multi-image-hero {
      display: table;
      width: 100%;
      table-layout: fixed;
    
      @include breakpoint($breakpoint-sm-only) {
        margin: 0 (-1 * $gutter-width-half / 2);
      }
    }
    
    .multi-image-hero__image-wrapper {
      display: table-cell;
      vertical-align: top;
    }
    
    .multi-image-hero__image-inner {
      position: relative;
      margin: 0 ($gutter-width-half / 2);
      background-color: $color-black;
    
      @include breakpoint($breakpoint-md) {
        margin: 0 $gutter-width-half;
      }
    }
    
    .multi-image-hero--overlay {
      .multi-image-hero__image-inner {
        &::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: 25px;
            left: 25px;
            width: calc(100% - 50px);
            height: calc(100% - 50px);
          }
        }
    
        // this accounts for the pseudo element and the first img tag which is the background image.
        > *:nth-child(n+2) {
          z-index: 2;
        }
      }
    }
    
    .multi-image-hero__image-title {
      @include font-bold;
      position: absolute;
      top: 50%;
      right: 20px;
      left: 20px;
      margin: 0;
      transform: translateY(-50%);
      color: $color-white;
      font-size: 1.2rem;
      letter-spacing: $base-letter-spacing;
      line-height: 2.0rem;
      text-align: center;
      text-shadow: 0 16px 23px rgba(0, 0, 0, 1);
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        font-size: 2.7rem;
        letter-spacing: 3px;
        line-height: 3.2rem;
      }
    
      @include breakpoint($breakpoint-xl) {
        font-size: 5.7rem;
        line-height: 6.0rem;
      }
    
      @include breakpoint($page-width-max) {
        letter-spacing: 10px;
      }
    }
    
    .multi-image-hero__image-description {
      margin: 10px 0 0;
      padding: 0 $gutter-width-half;
      color: $color-dark;
      font-size: 1.4rem;
      line-height: 1.7rem;
    
      @include breakpoint($breakpoint-xl) {
        margin: 15px 0 0;
        font-size: 1.9rem;
        line-height: 2.3rem;
      }
    }
    /* critical:end */
    
  • URL: /components/raw/multi-image-hero/multi-image-hero.scss
  • Filesystem Path: src/components/02-components/hero/multi-image-hero/multi-image-hero.scss
  • Size: 2.1 KB

There are no notes for this item.