Maui Jim Style Guide

Lens Details: Maui Rose® 

<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-mauirose.png" alt="Maui Rose®">
        <h6 class="lens-detail__headline">Maui Rose®</h6>
        <span class="lens-detail__subheadline">Best for fast action activities</span>
        <p class="lens-detail__description">Provides a subtle rose tint with the highest available contrast that&#x27;s perfect for fast moving sports.</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-mauirose.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-mauirose.jpg"
    }
  },
  "lensImage": {
    "src": "/assets/images/lens-detail-lens-mauirose.png",
    "alt": "Maui Rose®"
  },
  "headline": "Maui Rose®",
  "subheadline": "Best for fast action activities",
  "description": "Provides a subtle rose tint with the highest available contrast that's perfect for fast moving sports."
}
  • 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.