<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">
            <span class="multi-image-hero__image-title">MauiPassport Lens</span>
        </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">
            <span class="multi-image-hero__image-title">Conventional Rx Lens</span>
        </div>
        <p class="multi-image-hero__image-description">For comparative field of view.</p>
    </div>
</div>
<div class="multi-image-hero 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}}">
      <span class="multi-image-hero__image-title">{{title}}</span>
    </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",
      "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",
      "description": "For comparative field of view."
    }
  ]
}
  • Content:
    .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;
      padding: 0 ($gutter-width-half / 2);
    
      @include breakpoint($breakpoint-md) {
        padding: 0 $gutter-width-half;
      }
    }
    
    .multi-image-hero__image-title {
      position: absolute;
      top: 50%;
      right: 20px;
      left: 20px;
      transform: translateY(-50%);
      color: $color-white;
      font-size: 1.2rem;
      font-weight: $font-weight-bold;
      letter-spacing: 1px;
      line-height: 2.0rem;
      text-align: center;
      text-shadow: 0 6px 13px rgba(0, 0, 0, .5);
      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;
      }
    }
    
  • 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: 1.3 KB
  • Handle: @multi-image-hero
  • Preview:
  • Filesystem Path: src/components/02-components/hero/multi-image-hero/multi-image-hero.html

There are no notes for this item.