<div class="card-tabs js-card-tabs">
    <ul class="card-tabs__tabs">
        <li class="card-tabs__tab js-card-tabs-tab js-card-tabs-tab--active" data-tab="glare">Glare Elimination</li>
        <li class="card-tabs__tab js-card-tabs-tab" data-tab="color">Color Enhancement</li>
        <li class="card-tabs__tab js-card-tabs-tab" data-tab="health">Eye Health</li>
        <li class="card-tabs__tab js-card-tabs-tab" data-tab="protection">Lens Protection</li>
    </ul>
    <div class="card-tabs__content-wrapper js-card-tabs-content-wrapper js-card-tabs-content-wrapper--active" data-tab="glare">
        <h3 class="card-tabs__content-title">Glare Elimination</h3>
        <h4 class="card-tabs__content-subtitle">See True</h4>
        <div class="card-tabs__content-description">
            <p>Glare washes out colors, obscures details, and fatigues your eyes. PolarizedPlus2® lenses eliminate 99.9% of glare, allowing you to see the world at its brilliant best. Feature the industry&#x27;s most advanced techniques, our patented lens
                creation process creates an amazing difference you&#x27;ll see immediately.</p>
        </div>
        <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                    <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                    <button class="big-card__call-to-action button button--outlined">View</button>
                </div>
            </a>
        </div>

        <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                    <button class="big-card__call-to-action button button--outlined">View new arrivals</button>
                </div>
            </a>
        </div>

        <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                    <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                    <button class="big-card__call-to-action button button--outlined">View</button>
                </div>
            </a>
        </div>

        <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                    <button class="big-card__call-to-action button button--outlined">View new arrivals</button>
                </div>
            </a>
        </div>

        <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                    <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                    <button class="big-card__call-to-action button button--outlined">View</button>
                </div>
            </a>
        </div>

        <a class="button button--outlined card-tabs__content-call-to-action" href="#">Shop Now</a>
    </div>
    <div class="card-tabs__content-wrapper js-card-tabs-content-wrapper" data-tab="color">
        <h3 class="card-tabs__content-title">Color Enhancement</h3>
        <h4 class="card-tabs__content-subtitle">Perceive More</h4>
        <div class="card-tabs__content-description">
            <p>Many sunglass lenses simply darken your view, dimming and fading color for a flat, low-contrast perspective.</p>
            <p>Our PolarizedPlus2® lenses enhance the colors your eyes naturally perceive. So you see vibrant, saturated colors with a higher level of contrast and greater depth perception.</p>
        </div>
        <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                    <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                    <button class="big-card__call-to-action button button--outlined">View</button>
                </div>
            </a>
        </div>

        <a class="button button--outlined card-tabs__content-call-to-action" href="#">Shop Now</a>
    </div>
    <div class="card-tabs__content-wrapper js-card-tabs-content-wrapper" data-tab="health">
        <h3 class="card-tabs__content-title">Eye Health</h3>
        <h4 class="card-tabs__content-subtitle">Be Well</h4>
        <div class="card-tabs__content-description">
            <p>Just like your skin, your eyes need protection from exposure to the sun&#x27;s rays. PolarizedPlus2® lenses eliminate 100% of UV radiation and provide protection against a number of additional stresses, helping your eyes stay healthy so you
                can keep taking in all the world&#x27;s beauty.</p>
        </div>
        <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                    <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                    <button class="big-card__call-to-action button button--outlined">View</button>
                </div>
            </a>
        </div>

        <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                    <button class="big-card__call-to-action button button--outlined">View new arrivals</button>
                </div>
            </a>
        </div>

        <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                    <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                    <button class="big-card__call-to-action button button--outlined">View</button>
                </div>
            </a>
        </div>

        <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                    <button class="big-card__call-to-action button button--outlined">View new arrivals</button>
                </div>
            </a>
        </div>

        <a class="button button--outlined card-tabs__content-call-to-action" href="#">Shop Now</a>
    </div>
    <div class="card-tabs__content-wrapper js-card-tabs-content-wrapper" data-tab="protection">
        <h3 class="card-tabs__content-title">Lens Protection</h3>
        <h4 class="card-tabs__content-subtitle">Live Freely</h4>
        <div class="card-tabs__content-description">
            <p>Our sunglasses are meant to be worn, on sunny and cloudy days, on the beach and city streets. They&#x27;re there to protect your eyes and reveal the world&#x27;s brilliance, so the last thing we want is for you to worry about them.</p>
            <p>Our PolarizedPlus2® lenses incorporate a number of technologies specifically intended to maximize durability and convenience.</p>
        </div>
        <div class="big-card big-card--image-left u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-left-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-left-small.jpg 400w, /assets/images/big-card-left-medium.jpg 533w, /assets/images/big-card-left-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Color. Clarity. Detail.</h2>
                    <span class="big-card__suffix">Polarized Plus2 Sunglasses</span>
                    <button class="big-card__call-to-action button button--outlined">View</button>
                </div>
            </a>
        </div>

        <div class="big-card big-card--image-right u-block u-page-width-max-gutters">
            <a class="big-card__link" href="#">
                <div class="big-card__image-container">
                    <img class="big-card__image u-object-fit-cover" src="/assets/images/big-card-right-large.jpg" sizes="(min-width: 681px) 50vw, 100vw" srcset="/assets/images/big-card-right-small.jpg 400w, /assets/images/big-card-right-medium.jpg 533w, /assets/images/big-card-right-large.jpg 710w">
                </div>
                <div class="big-card__text">
                    <span class="big-card__prefix">New Arrivals</span>
                    <h2 class="big-card__headline">Created on the Hawaiian Islands.</h2>
                    <button class="big-card__call-to-action button button--outlined">View new arrivals</button>
                </div>
            </a>
        </div>

        <a class="button button--outlined card-tabs__content-call-to-action" href="#">Shop Now</a>
    </div>
</div>
<div class="card-tabs js-card-tabs">
  <ul class="card-tabs__tabs">
    {{#each items}}
    <li class="card-tabs__tab js-card-tabs-tab{{#if active}} js-card-tabs-tab--active{{/if}}" data-tab="{{id}}">{{title}}</li>
    {{/each}}
  </ul>
  {{#each items}}
  <div class="card-tabs__content-wrapper js-card-tabs-content-wrapper{{#if active}} js-card-tabs-content-wrapper--active{{/if}}" data-tab="{{id}}">
    <h3 class="card-tabs__content-title">{{title}}</h3>
    <h4 class="card-tabs__content-subtitle">{{subtitle}}</h4>
    <div class="card-tabs__content-description">
      {{#each description}}
      <p>{{this}}</p>
      {{/each}}
    </div>
    {{#each components}}
    {{render (dynamicVariant component variant)}}
    {{/each}}
    <a class="button button--outlined card-tabs__content-call-to-action" href="#">Shop Now</a>
  </div>
  {{/each}}
</div>
{
  "items": [
    {
      "id": "glare",
      "active": true,
      "title": "Glare Elimination",
      "subtitle": "See True",
      "description": [
        "Glare washes out colors, obscures details, and fatigues your eyes. PolarizedPlus2® lenses eliminate 99.9% of glare, allowing you to see the world at its brilliant best. Feature the industry's most advanced techniques, our patented lens creation process creates an amazing difference you'll see immediately."
      ],
      "components": [
        {
          "component": "big-card",
          "variant": "image-left"
        },
        {
          "component": "big-card",
          "variant": "image-right"
        },
        {
          "component": "big-card",
          "variant": "image-left"
        },
        {
          "component": "big-card",
          "variant": "image-right"
        },
        {
          "component": "big-card",
          "variant": "image-left"
        }
      ]
    },
    {
      "id": "color",
      "title": "Color Enhancement",
      "subtitle": "Perceive More",
      "description": [
        "Many sunglass lenses simply darken your view, dimming and fading color for a flat, low-contrast perspective.",
        "Our PolarizedPlus2® lenses enhance the colors your eyes naturally perceive. So you see vibrant, saturated colors with a higher level of contrast and greater depth perception."
      ],
      "components": [
        {
          "component": "big-card",
          "variant": "image-left"
        }
      ]
    },
    {
      "id": "health",
      "title": "Eye Health",
      "subtitle": "Be Well",
      "description": [
        "Just like your skin, your eyes need protection from exposure to the sun's rays. PolarizedPlus2® lenses eliminate 100% of UV radiation and provide protection against a number of additional stresses, helping your eyes stay healthy so you can keep taking in all the world's beauty."
      ],
      "components": [
        {
          "component": "big-card",
          "variant": "image-left"
        },
        {
          "component": "big-card",
          "variant": "image-right"
        },
        {
          "component": "big-card",
          "variant": "image-left"
        },
        {
          "component": "big-card",
          "variant": "image-right"
        }
      ]
    },
    {
      "id": "protection",
      "title": "Lens Protection",
      "subtitle": "Live Freely",
      "description": [
        "Our sunglasses are meant to be worn, on sunny and cloudy days, on the beach and city streets. They're there to protect your eyes and reveal the world's brilliance, so the last thing we want is for you to worry about them.",
        "Our PolarizedPlus2® lenses incorporate a number of technologies specifically intended to maximize durability and convenience."
      ],
      "components": [
        {
          "component": "big-card",
          "variant": "image-left"
        },
        {
          "component": "big-card",
          "variant": "image-right"
        }
      ]
    }
  ]
}
  • Content:
    (function (window) {
      'use strict';
    
      const activeTabClass = 'js-card-tabs-tab--active';
      const activeWrapperClass = 'js-card-tabs-content-wrapper--active';
    
      function initInstance(instance) {
        const tabs = instance.querySelectorAll('.js-card-tabs-tab');
    
        for (let i = 0; i < tabs.length; i++) {
          tabs[i].addEventListener('click', handleTab);
        }
      }
    
      function handleTab(e) {
        const tab = e.target;
        const instance = tab.closest('.js-card-tabs');
        const tabs = instance.querySelectorAll('.js-card-tabs-tab');
        const contentWrappers = instance.querySelectorAll('.js-card-tabs-content-wrapper');
    
        for (let i = 0; i < tabs.length; i++) {
          if (tabs[i] == tab) {
            tabs[i].classList.add(activeTabClass);
          }
          else {
            tabs[i].classList.remove(activeTabClass);
          }
        }
    
        for (let i = 0; i < contentWrappers.length; i++) {
          if (contentWrappers[i].getAttribute('data-tab') == tab.getAttribute('data-tab')) {
            contentWrappers[i].classList.add(activeWrapperClass);
          }
          else {
            contentWrappers[i].classList.remove(activeWrapperClass);
          }
        }
      }
    
      function init() {
        const instances = document.querySelectorAll('.js-card-tabs');
    
        for (let i = 0; i < instances.length; i++) {
          if (!instances[i].classList.contains('js-component-init')) {
            initInstance(instances[i]);
    
            instances[i].classList.add('js-component-init');
          }
        }
      }
    
      // Allow application JS to reinitialize any instances added with Ajax, etc.
      if (typeof componentEvents !== 'undefined') {
        componentEvents.on('component-init', init);
      }
    
      init();
    
    })(this);
    
  • URL: /components/raw/card-tabs/card-tabs.js
  • Filesystem Path: src/components/02-components/technology/card-tabs/card-tabs.js
  • Size: 1.7 KB
  • Content:
    .card-tabs__tabs {
      @include reset-list;
      display: table;
      width: 100%;
      background-color: $color-lighter;
      table-layout: center;
    
      @include breakpoint($breakpoint-sm-only) {
        display: none;
      }
    }
    
    .card-tabs__tab {
      display: table-cell;
      position: relative;
      height: 50px;
      padding: 0 20px;
      color: $color-darkest;
      font-size: 1.4rem;
      line-height: 2.0rem;
      text-align: center;
      text-transform: uppercase;
      cursor: pointer;
      vertical-align: middle;
    
      &.js-card-tabs-tab--active {
        font-weight: $font-weight-bold;
    
        &:after {
          position: absolute;
          right: 0;
          bottom: 1px;
          left: 0;
          border-bottom: 1px solid $color-primary;
          content: '';
        }
      }
    }
    
    .card-tabs__content-wrapper {
      margin-bottom: 50px;
    
      @include breakpoint($breakpoint-md) {
        display: none;
        text-align: center;
    
        &.js-card-tabs-content-wrapper--active {
          display: block;
        }
      }
    }
    
    .card-tabs__content-title {
      color: $color-darkest;
      font-size: 2.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: 3px;
      line-height: 2.8rem;
      text-align: center;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        display: none;
      }
    }
    
    .card-tabs__content-subtitle {
      color: $color-dark;
      font-size: 2.0rem;
      font-weight: $font-weight-normal;
      letter-spacing: 1px;
      line-height: 2.4rem;
      text-align: center;
    
      @include breakpoint($breakpoint-xl) {
        font-size: 2.4rem;
        line-height: 2.8rem;
      }
    }
    
    .card-tabs__content-description {
      margin: 0 $gutter-width-half;
    
      p:not([class]) {
        color: $color-darkest;
        font-size: 1.4rem;
        line-height: 2.0rem;
      }
    
      @include breakpoint($breakpoint-sm-only) {
        text-align: left;
      }
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 50px;
      }
    }
    
    .card-tabs__content-call-to-action {
      display: inline-block;
    
      @include breakpoint($breakpoint-sm-only) {
        width: calc(100% - 20px);
        margin: 20px $gutter-width-half;
        box-sizing: border-box;
      }
    
      @include breakpoint($breakpoint-md) {
        margin: 40px auto;
      }
    }
    
  • URL: /components/raw/card-tabs/card-tabs.scss
  • Filesystem Path: src/components/02-components/technology/card-tabs/card-tabs.scss
  • Size: 2.1 KB
  • Handle: @card-tabs
  • Preview:
  • Filesystem Path: src/components/02-components/technology/card-tabs/card-tabs.html

There are no notes for this item.