<div class="lens-detail u-block u-page-width-max">
    <h5 class="lens-detail__title">Lens Details</h5>
    <div class="lens-detail__text">
        <img class="lens-detail__lens-image" src="/assets/images/lens-detail-lens-hclbronze.png" alt="HCL® Bronze">
        <h6 class="lens-detail__headline">HCL® Bronze</h6>
        <span class="lens-detail__subheadline">Full sun to overcast</span>
        <p class="lens-detail__description">For everyday variable conditions, from full sun to overcast. Provides excellent contrast. Great if you love a warm, subtle bronze tint.</p>
        <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>

    </div>
    <div class="lens-detail__comparison">
        <figure class="image-comparison js-image-comparison">
            <img class="image-comparison__image" src="/assets/images/lens-detail-hclbronze.jpg" alt="With">
            <div class="image-comparison__resize js-image-comparison-resize">
                <img class="image-comparison__image image-comparison__image--resize" src="/assets/images/lens-detail-without.jpg" alt="With">
            </div>
            <span class="image-comparison__handle js-image-comparison-handle"></span>
            <figcaption class="image-comparison__caption image-comparison__caption--left">Without</figcaption>
            <figcaption class="image-comparison__caption image-comparison__caption--center">Images are not retouched</figcaption>
            <figcaption class="image-comparison__caption image-comparison__caption--right">With</figcaption>
        </figure>

    </div>
</div>
<div class="lens-detail u-block u-page-width-max{{#if inactive}} js-hidden{{/if}}"{{#if product}} data-product-id="{{product}}"{{/if}}>
  <h5 class="lens-detail__title">{{title}}</h5>
  <div class="lens-detail__text">
    <img class="lens-detail__lens-image" src="{{lensImage.src}}" alt="{{lensImage.alt}}">
    <h6 class="lens-detail__headline">{{headline}}</h6>
    <span class="lens-detail__subheadline">{{subheadline}}</span>
    <p class="lens-detail__description">{{description}}</p>
    {{render (dynamicVariant 'lens-material' material)}}
  </div>
  <div class="lens-detail__comparison">
    {{render '@image-comparison' imageComparison merge=true}}
  </div>
</div>
{
  "pageCss": [
    "products"
  ],
  "title": "Lens Details",
  "material": "superthin",
  "imageComparison": {
    "imageLeft": {
      "src": "/assets/images/lens-detail-without.jpg"
    },
    "imageRight": {
      "src": "/assets/images/lens-detail-hclbronze.jpg"
    }
  },
  "lensImage": {
    "src": "/assets/images/lens-detail-lens-hclbronze.png",
    "alt": "HCL® Bronze"
  },
  "headline": "HCL® Bronze",
  "subheadline": "Full sun to overcast",
  "description": "For everyday variable conditions, from full sun to overcast. Provides excellent contrast. Great if you love a warm, subtle bronze tint."
}
  • Content:
    .lens-detail {
      @include clearfix;
      padding: 0 $gutter-width-half;
      color: $color-darkest;
      line-height: 2.0rem;
      text-align: center;
    
      @include breakpoint($breakpoint-xl) {
        margin-right: 0;
        margin-left: 0;
        padding: 0;
      }
    }
    
    .lens-detail__title {
      margin: 0;
      font-size: 1.6rem;
      letter-spacing: 1px;
      line-height: 1.9rem;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-xl) {
        margin-bottom: 20px;
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .lens-detail__text {
      @include breakpoint($breakpoint-xl) {
        @include span(4);
      }
    }
    
    .lens-detail__comparison {
      @include breakpoint($breakpoint-xl) {
        @include span(8);
      }
    }
    
    .lens-detail__headline {
      @include text-label;
      margin: 0;
    
      @include breakpoint($breakpoint-md) {
        font-size: 1.9rem;
        line-height: 3.0rem;
      }
    }
    
    .lens-detail__subheadline {
      @include text-label($color-medium-dark);
      text-transform: uppercase;
    }
    
    .lens-detail__description {
      @include text-label;
    
      @include breakpoint($breakpoint-md) {
        @include span(10);
        @include push(1);
        text-align: left;
      }
    
      @include breakpoint($breakpoint-xl) {
        width: 100%;
        margin: 15px 0;
      }
    }
    
    .lens-detail__lens-image {
      margin: 20px auto;
    
      @include breakpoint($breakpoint-xl) {
        margin-top: 0;
      }
    }
    
  • URL: /components/raw/lens-detail/lens-detail.scss
  • Filesystem Path: src/components/02-components/lens-detail/lens-detail.scss
  • Size: 1.3 KB

There are no notes for this item.