<div class="lens-materials">
    <h3 class="technology__title">The Materials</h3>
    <h4 class="technology__subtitle">Formed For Function</h4>
    <ul class="lens-materials__materials">
        <li class="lens-materials__material">
            <div class="lens-material">
                <h6 class="lens-material__title">Superthin Glass</h6>
                <p class="lens-material__description">SuperThin Glass provides the absolute best optics available. It is the heaviest of our four materials, but is 20% thinner and lighter than standard glass.</p>
                <div class="lens-material__diagram">
                    <div class="lens-material__label lens-material__label--top">Clarity</div>
                    <div class="lens-material__middle">
                        <div class="lens-material__label lens-material__label--left">Shatter Resistance</div>
                        <div class="lens-material__image-wrapper">
                            <img class="lens-material__image" src="/assets/images/lens-material-superthin.svg">
                            <span class="lens-material__caption">ST</span>
                        </div>
                        <div class="lens-material__label lens-material__label--right">Scratch Resistance</div>
                    </div>
                    <div class="lens-material__label lens-material__label--bottom">Weight</div>
                </div>
            </div>

            <a class="button button--outlined lens-materials__shop" href="#">Shop SuperThin Glass</a>
        </li>
        <li class="lens-materials__material">
            <div class="lens-material">
                <h6 class="lens-material__title">MauiPure®</h6>
                <p class="lens-material__description">Our most popular lens material. It combines optics almost as crisp as SuperThin Glass with ultra lightweight and excellent scratch and shatter resistance.</p>
                <div class="lens-material__diagram">
                    <div class="lens-material__label lens-material__label--top">Clarity</div>
                    <div class="lens-material__middle">
                        <div class="lens-material__label lens-material__label--left">Shatter Resistance</div>
                        <div class="lens-material__image-wrapper">
                            <img class="lens-material__image" src="/assets/images/lens-material-mauipure.svg">
                            <span class="lens-material__caption">MP</span>
                        </div>
                        <div class="lens-material__label lens-material__label--right">Scratch Resistance</div>
                    </div>
                    <div class="lens-material__label lens-material__label--bottom">Weight</div>
                </div>
            </div>

            <a class="button button--outlined lens-materials__shop" href="#">Shop MauiPure®</a>
        </li>
        <li class="lens-materials__material">
            <div class="lens-material">
                <h6 class="lens-material__title">Maui Evolution®</h6>
                <p class="lens-material__description">Maui Evolution® features the light weight and scratch and shatter resistance of polycarbonate while offering a much higher optical clarity.</p>
                <div class="lens-material__diagram">
                    <div class="lens-material__label lens-material__label--top">Clarity</div>
                    <div class="lens-material__middle">
                        <div class="lens-material__label lens-material__label--left">Shatter Resistance</div>
                        <div class="lens-material__image-wrapper">
                            <img class="lens-material__image" src="/assets/images/lens-material-evolution.svg">
                            <span class="lens-material__caption">ME</span>
                        </div>
                        <div class="lens-material__label lens-material__label--right">Scratch Resistance</div>
                    </div>
                    <div class="lens-material__label lens-material__label--bottom">Weight</div>
                </div>
            </div>

            <a class="button button--outlined lens-materials__shop" href="#">Shop Maui Evolution®</a>
        </li>
        <li class="lens-materials__material">
            <div class="lens-material">
                <h6 class="lens-material__title">MauiBrilliant</h6>
                <p class="lens-material__description">Maui Jim’s most advanced lens material that features optics nearly as clear as glass with just one- third of the weight.</p>
                <div class="lens-material__diagram">
                    <div class="lens-material__label lens-material__label--top">Clarity</div>
                    <div class="lens-material__middle">
                        <div class="lens-material__label lens-material__label--left">Shatter Resistance</div>
                        <div class="lens-material__image-wrapper">
                            <img class="lens-material__image" src="/assets/images/lens-material-mauibrilliant.svg">
                            <span class="lens-material__caption">MB</span>
                        </div>
                        <div class="lens-material__label lens-material__label--right">Scratch Resistance</div>
                    </div>
                    <div class="lens-material__label lens-material__label--bottom">Weight</div>
                </div>
            </div>

            <a class="button button--outlined lens-materials__shop" href="#">Shop MauiBrilliant</a>
        </li>
    </ul>
</div>
<div class="lens-materials">
  {{#if title}}
  <h3 class="technology__title">{{title}}</h3>
  {{/if}}
  {{#if subtitle}}
  <h4 class="technology__subtitle">{{subtitle}}</h4>
  {{/if}}
  <ul class="lens-materials__materials">
    {{#each materials}}
    <li class="lens-materials__material">
      {{render (dynamicVariant 'lens-material' @key)}}
      <a class="button button--outlined lens-materials__shop" href="#">Shop {{this}}</a>
    </li>
    {{/each}}
  </ul>
</div>
{
  "title": "The Materials",
  "subtitle": "Formed For Function",
  "materials": {
    "superthin": "SuperThin Glass",
    "mauipure": "MauiPure®",
    "evolution": "Maui Evolution®",
    "mauibrilliant": "MauiBrilliant"
  }
}
  • Content:
    .lens-materials__materials {
      @include reset-list;
    }
    
    .lens-materials__material {
      text-align: center;
    
      @include breakpoint($breakpoint-md) {
        width: 50%;
        float: left;
    
        &:nth-child(odd) {
          clear: both;
        }
    
        // Ensures the links align below.
        .lens-material__description {
          min-height: 85px;
        }
      }
    
      @include breakpoint($breakpoint-lg) {
        .lens-material__description {
          min-height: 70px;
        }
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 25%;
        padding: 0 $gutter-width-half;
        box-sizing: border-box;
    
        &:nth-child(odd) {
          clear: none;
        }
    
        .lens-material__description {
          min-height: 100px;
        }
      }
    
      @include breakpoint($page-width-max) {
        .lens-material__description {
          min-height: 70px;
        }
      }
    }
    
    .lens-materials__shop {
      display: inline-block;
      margin-bottom: 60px;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 80px;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 300px;
        max-width: 100%;
      }
    }
    
  • URL: /components/raw/lens-materials/lens-materials.scss
  • Filesystem Path: src/components/02-components/technology/lens-materials/lens-materials.scss
  • Size: 1 KB
  • Handle: @lens-materials
  • Preview:
  • Filesystem Path: src/components/02-components/technology/lens-materials/lens-materials.html

There are no notes for this item.