<div class="popular-items u-block u-page-width-max-gutters">
    <h2 class="popular-items__title">Most Popular Items</h2>
    <div class="popular-items__items cards cards--even">
        <div class="card js-card">
            <div class="card__inner">
                <a class="card__link js-card-url" href="#202-02" data-202-02-url="#202-02" data-B202-2M-url="#B202-2M" data-H202-10-url="#H202-10" data-H202-2M-url="#H202-2M" data-H202-70-url="#H202-70" data-HT202-71-url="#HT202-71" data-H202-2M-2-url="#H202-2M-2" data-H202-70-2-url="#H202-70-2"
                    data-HT202-71-2-url="#HT202-71-2" data-202-02-stock="true" data-B202-2M-stock="true" data-H202-10-stock="true" data-H202-2M-stock="true" data-H202-70-stock="true" data-HT202-71-stock="true" data-H202-2M-2-stock="true" data-H202-70-2-stock="true"
                    data-HT202-71-2-stock="true">
                    <ul class="rating">
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-empty">
                            <svg class="icon icon--star-empty">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

                        </li>
                    </ul>

                    <img class="card__image js-card-image" data-angle="front" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340" data-variant="202-02" data-202-02-front="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;340"
                        data-202-02-angle="https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$&amp;wid&#x3D;340" data-202-02-side="https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$&amp;wid&#x3D;340" data-B202-2M-front="https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$&amp;wid&#x3D;340"
                        data-B202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-B202-2M-side="https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$&amp;wid&#x3D;340" data-H202-10-front="https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$&amp;wid&#x3D;340"
                        data-H202-10-angle="https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$&amp;wid&#x3D;340" data-H202-10-side="https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$&amp;wid&#x3D;340" data-H202-2M-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"
                        data-H202-2M-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-H202-2M-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" data-H202-70-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"
                        data-H202-70-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340" data-H202-70-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" data-HT202-71-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"
                        data-HT202-71-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340" data-HT202-71-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340" data-H202-2M-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$&amp;wid&#x3D;340"
                        data-H202-2M-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$&amp;wid&#x3D;340" data-H202-2M-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$&amp;wid&#x3D;340" data-H202-70-2-front="https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$&amp;wid&#x3D;340"
                        data-H202-70-2-angle="https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$&amp;wid&#x3D;340" data-H202-70-2-side="https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$&amp;wid&#x3D;340" data-HT202-71-2-front="https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$&amp;wid&#x3D;340"
                        data-HT202-71-2-angle="https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$&amp;wid&#x3D;340" data-HT202-71-2-side="https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$&amp;wid&#x3D;340">
                    <span class="card__status js-card-status" data-202-02-status="" data-B202-2M-status="" data-H202-10-status="" data-H202-2M-status="New" data-H202-70-status="" data-HT202-71-status="" data-H202-2M-2-status="" data-H202-70-2-status="" data-HT202-71-2-status="">
                
                
                
                
                
                
                
                
                
            </span>
                    <h5 class="card__title">PEAHI</h5>
                    <span class="card__price js-card-price" data-202-02-price="$149.00" data-B202-2M-price="$189.00" data-H202-10-price="$229.00" data-H202-2M-price="$229.00" data-H202-70-price="$229.00" data-HT202-71-price="$229.00" data-H202-2M-2-price="$229.00" data-H202-70-2-price="$229.00"
                        data-HT202-71-2-price="$229.00">
              $149.00
            </span>
                </a>
                <div class="card__variants-wrapper">
                    <ul class="card__variants js-card-variants">
                        <li class="card__variant js-card-variant js-card-variant--active" data-id="202-02">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Gloss Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="B202-2M">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-10">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#303032;background-image:url(https://mauijim.scene7.com/is/image/mauijim/10);" type="button">Dark Tortoise</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-2M">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-70">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#7d4a07;" type="button">Redfish</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="HT202-71">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#218b16;" type="button">MahiMahi</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-2M-2">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="H202-70-2">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#7d4a07;" type="button">Redfish</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="HT202-71-2">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#218b16;" type="button">MahiMahi</button>
                        </li>
                    </ul>
                    <div class="card__variants-controls js-card-variants-controls">
                        <button class="card__variants-control card__variants-control--prev" type="button">
                <span class="u-visually-hidden">Previous</span>
                <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

              </button>
                        <button class="card__variants-control card__variants-control--next" type="button">
                <span class="u-visually-hidden">Next</span>
                <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

              </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card js-card">
            <div class="card__inner">
                <a class="card__link js-card-url" href="#HTS267-15C" data-HTS267-15C-url="#HTS267-15C" data-HS267-10M-url="#HS267-10M" data-GS267-02MR-url="#GS267-02MR" data-HTS267-15C-stock="true" data-HS267-10M-stock="true" data-GS267-02MR-stock="true">
                    <ul class="rating">
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-empty">
                            <svg class="icon icon--star-empty">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

                        </li>
                    </ul>

                    <img class="card__image js-card-image" data-angle="front" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;340" data-variant="HTS267-15C" data-HTS267-15C-front="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;340"
                        data-HTS267-15C-angle="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_quarter?$config1800$&amp;wid&#x3D;340" data-HTS267-15C-side="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_side?$config1800$&amp;wid&#x3D;340" data-HS267-10M-front="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_front?$config1800$&amp;wid&#x3D;340"
                        data-HS267-10M-angle="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_quarter?$config1800$&amp;wid&#x3D;340" data-HS267-10M-side="https://s7d2.scene7.com/is/image/mauijim/HS267-10M_side?$config1800$&amp;wid&#x3D;340" data-GS267-02MR-front="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_front?$config1800$&amp;wid&#x3D;340"
                        data-GS267-02MR-angle="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_quarter?$config1800$&amp;wid&#x3D;340" data-GS267-02MR-side="https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_side?$config1800$&amp;wid&#x3D;340">
                    <span class="card__status js-card-status" data-HTS267-15C-status="New" data-HS267-10M-status="" data-GS267-02MR-status="New">
                New
                
                
            </span>
                    <h5 class="card__title">WATERWAYS</h5>
                    <span class="card__price js-card-price" data-HTS267-15C-price="$219.00" data-HS267-10M-price="$229.00" data-GS267-02MR-price="$239.00">
              $219.00
            </span>
                </a>
                <div class="card__variants-wrapper">
                    <ul class="card__variants js-card-variants">
                        <li class="card__variant js-card-variant js-card-variant--active" data-id="HTS267-15C">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#808000;" type="button">Olive Stripe</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="HS267-10M">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#303032;" type="button">Matte Tortoise</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="GS267-02MR">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Matte Black Rubber</button>
                        </li>
                    </ul>
                    <div class="card__variants-controls js-card-variants-controls">
                        <button class="card__variants-control card__variants-control--prev" type="button">
                <span class="u-visually-hidden">Previous</span>
                <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

              </button>
                        <button class="card__variants-control card__variants-control--next" type="button">
                <span class="u-visually-hidden">Next</span>
                <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

              </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card js-card">
            <div class="card__inner">
                <a class="card__link js-card-url" href="#H257-16C" data-H257-16C-url="#H257-16C" data-B257-05CR-url="#B257-05CR" data-257-17C-url="#257-17C" data-H257-16C-stock="true" data-B257-05CR-stock="true" data-257-17C-stock="true">
                    <ul class="rating">
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-empty">
                            <svg class="icon icon--star-empty">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

                        </li>
                    </ul>

                    <img class="card__image js-card-image" data-angle="front" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;340" data-variant="H257-16C" data-H257-16C-front="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;340"
                        data-H257-16C-angle="https://s7d2.scene7.com/is/image/mauijim/H257-16C_quarter?$config1800$&amp;wid&#x3D;340" data-H257-16C-side="https://s7d2.scene7.com/is/image/mauijim/H257-16C_side?$config1800$&amp;wid&#x3D;340" data-B257-05CR-front="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_front?$config1800$&amp;wid&#x3D;340"
                        data-B257-05CR-angle="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_quarter?$config1800$&amp;wid&#x3D;340" data-B257-05CR-side="https://s7d2.scene7.com/is/image/mauijim/B257-05CR_side?$config1800$&amp;wid&#x3D;340" data-257-17C-front="https://s7d2.scene7.com/is/image/mauijim/257-17C_front?$config1800$&amp;wid&#x3D;340"
                        data-257-17C-angle="https://s7d2.scene7.com/is/image/mauijim/257-17C_quarter?$config1800$&amp;wid&#x3D;340" data-257-17C-side="https://s7d2.scene7.com/is/image/mauijim/257-17C_side?$config1800$&amp;wid&#x3D;340">
                    <span class="card__status js-card-status" data-H257-16C-status="New" data-B257-05CR-status="" data-257-17C-status="">
                New
                
                
            </span>
                    <h5 class="card__title">KAWIKA</h5>
                    <span class="card__price js-card-price" data-H257-16C-price="$299.00" data-B257-05CR-price="$299.00" data-257-17C-price="$299.00">
              $299.00
            </span>
                </a>
                <div class="card__variants-wrapper">
                    <ul class="card__variants js-card-variants">
                        <li class="card__variant js-card-variant js-card-variant--active" data-id="H257-16C">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#e0d468;" type="button">Tortoise with Antique Gold</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="B257-05CR">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#fff; border: 1px solid #dedede;" type="button">Crystal</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="257-17C">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#808080;" type="button">Black Gloss with Antique Pewter</button>
                        </li>
                    </ul>
                    <div class="card__variants-controls js-card-variants-controls">
                        <button class="card__variants-control card__variants-control--prev" type="button">
                <span class="u-visually-hidden">Previous</span>
                <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

              </button>
                        <button class="card__variants-control card__variants-control--next" type="button">
                <span class="u-visually-hidden">Next</span>
                <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

              </button>
                    </div>
                </div>
            </div>
        </div>
        <div class="card js-card">
            <div class="card__inner">
                <a class="card__link js-card-url" href="#H178-10" data-H178-10-url="#H178-10" data-178-02-url="#178-02" data-H178-10-stock="true" data-178-02-stock="true">
                    <ul class="rating">
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-full">
                            <svg class="icon icon--star-full">
  <use xlink:href="/assets/icons/icons.svg#star-full"></use>
</svg>

                        </li>
                        <li class="rating__star rating__star--star-empty">
                            <svg class="icon icon--star-empty">
  <use xlink:href="/assets/icons/icons.svg#star-empty"></use>
</svg>

                        </li>
                    </ul>

                    <img class="card__image js-card-image" data-angle="front" src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;340" data-variant="H178-10" data-H178-10-front="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;340"
                        data-H178-10-angle="https://s7d2.scene7.com/is/image/mauijim/H178-10_quarter?$config1800$&amp;wid&#x3D;340" data-H178-10-side="https://s7d2.scene7.com/is/image/mauijim/H178-10_side?$config1800$&amp;wid&#x3D;340" data-178-02-front="https://s7d2.scene7.com/is/image/mauijim/178-02_front?$config1800$&amp;wid&#x3D;340"
                        data-178-02-angle="https://s7d2.scene7.com/is/image/mauijim/178-02_quarter?$config1800$&amp;wid&#x3D;340" data-178-02-side="https://s7d2.scene7.com/is/image/mauijim/178-02_side?$config1800$&amp;wid&#x3D;340">
                    <span class="card__status js-card-status" data-H178-10-status="New" data-178-02-status="New">
                New
                
            </span>
                    <h5 class="card__title">VOYAGER</h5>
                    <span class="card__price js-card-price" data-H178-10-price="$219.00" data-178-02-price="$219.00">
              $219.00
            </span>
                </a>
                <div class="card__variants-wrapper">
                    <ul class="card__variants js-card-variants">
                        <li class="card__variant js-card-variant js-card-variant--active" data-id="H178-10">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#303032;" type="button">Tortoise</button>
                        </li>
                        <li class="card__variant js-card-variant" data-id="178-02">
                            <button class="card__variant-button js-card-variant-button" style="background-color:#000;" type="button">Gloss Black</button>
                        </li>
                    </ul>
                    <div class="card__variants-controls js-card-variants-controls">
                        <button class="card__variants-control card__variants-control--prev" type="button">
                <span class="u-visually-hidden">Previous</span>
                <svg class="icon icon--arrow-left">
  <use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>

              </button>
                        <button class="card__variants-control card__variants-control--next" type="button">
                <span class="u-visually-hidden">Next</span>
                <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>

              </button>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <a class="popular-items__call-to-action button button--outlined" href="#">View Popular Items</a>
</div>
<div class="popular-items u-block u-page-width-max-gutters">
  <h2 class="popular-items__title">{{title}}</h2>
  <div class="popular-items__items cards cards--even">
    {{#each cards}}
      {{> @card }}
    {{/each}}
  </div>
  {{#if callToAction}}
  <a class="popular-items__call-to-action button button--outlined" href="{{this.path}}">{{callToAction}}</a>
  {{/if}}
</div>
{
  "title": "Most Popular Items",
  "callToAction": "View Popular Items",
  "path": "#",
  "cards": [
    {
      "name": "PEAHI",
      "summary": "Polarized men's classic sunglasses",
      "description": "Pe'ahi ('peh-AH-hee'), on Maui's north shore. Known for big waves as extreme as 70 feet. Its legendary reef break is respectfully referred to by surfers as Jaws.",
      "category": "Wrap",
      "rating": [
        "star-full",
        "star-full",
        "star-half",
        "star-empty",
        "star-empty"
      ],
      "vip": null,
      "tax": "Inkl. MWST",
      "variants": [
        {
          "id": "202-02",
          "name": "Gloss Black",
          "color": "#000",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/202-02_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/202-02_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$149.00",
          "salePrice": "$229.00",
          "url": "#202-02",
          "status": null,
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "202-02",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "B202-2M",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/B202-2M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$189.00",
          "salePrice": "$219.00",
          "url": "#B202-2M",
          "status": null,
          "stock": "In Stock",
          "lens": "Blue Hawaii",
          "lensId": "bluehawaii",
          "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "B202-2M",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-10",
          "name": "Dark Tortoise",
          "color": "#303032",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-10_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-10_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-10_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": "https://mauijim.scene7.com/is/image/mauijim/10",
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-10",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-10",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-2M",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-2M",
          "status": "New",
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-2M",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-70",
          "name": "Redfish",
          "color": "#7d4a07",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-70",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-70",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "HT202-71",
          "name": "MahiMahi",
          "color": "#218b16",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#HT202-71",
          "status": null,
          "stock": "In Stock",
          "lens": "Maui HT™",
          "lensId": "mauiht",
          "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "HT202-71",
            "inactive": true,
            "material": "mauipure"
          }
        },
        {
          "id": "H202-2M-2",
          "name": "Matte Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-2M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-2M-2",
          "status": null,
          "stock": "Out of Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-2M-2",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "H202-70-2",
          "name": "Redfish",
          "color": "#7d4a07",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/H202-70_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/H202-70_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/H202-70_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#H202-70-2",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H202-70-2",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "HT202-71-2",
          "name": "MahiMahi",
          "color": "#218b16",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_front?$config1800$",
            "angle": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_quarter?$config1800$",
            "side": "https://mauijim.scene7.com/is/image/mauijim/HT202-71_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#HT202-71-2",
          "status": null,
          "stock": "In Stock",
          "lens": "Maui HT™",
          "lensId": "mauiht",
          "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "HT202-71-2",
            "inactive": true,
            "material": "mauipure"
          }
        }
      ],
      "callToAction": null,
      "mauijim": true,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null
    },
    {
      "name": "WATERWAYS",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "star-half",
        "star-empty"
      ],
      "vip": {
        "cardValue": "30%",
        "originalPrice": "$319.00"
      },
      "tax": "Inkl. MWST",
      "variants": [
        {
          "id": "HTS267-15C",
          "name": "Olive Stripe",
          "color": "#808000",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$219.00",
          "salePrice": null,
          "url": "#HTS267-15C",
          "status": "New",
          "stock": "In Stock",
          "lens": "Maui HT™",
          "lensId": "mauiht",
          "lensFull": "Maui HT™ - Highest usable light transmission for incredible depth perception.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "HTS267-15C",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "HS267-10M",
          "name": "Matte Tortoise",
          "color": "#303032",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/HS267-10M_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$229.00",
          "salePrice": null,
          "url": "#HS267-10M",
          "status": null,
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "HS267-10M",
            "inactive": true,
            "material": "superthin"
          }
        },
        {
          "id": "GS267-02MR",
          "name": "Matte Black Rubber",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/GS267-02MR_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$239.00",
          "salePrice": null,
          "url": "#GS267-02MR",
          "status": "New",
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "GS267-02MR",
            "inactive": true,
            "material": "superthin"
          }
        }
      ],
      "callToAction": null,
      "mauijim": true,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null
    },
    {
      "name": "KAWIKA",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "star-half",
        "star-empty"
      ],
      "vip": {
        "cardValue": "30%",
        "originalPrice": "$319.00"
      },
      "tax": null,
      "variants": [
        {
          "id": "H257-16C",
          "name": "Tortoise with Antique Gold",
          "color": "#e0d468",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/H257-16C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$299.00",
          "salePrice": null,
          "url": "#H257-16C",
          "status": "New",
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "H257-16C",
            "inactive": null,
            "material": "mauipure"
          }
        },
        {
          "id": "B257-05CR",
          "name": "Crystal",
          "color": "#fff; border: 1px solid #dedede",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/B257-05CR_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$299.00",
          "salePrice": null,
          "url": "#B257-05CR",
          "status": null,
          "stock": "In Stock",
          "lens": "Blue Hawaii",
          "lensId": "bluehawaii",
          "lensFull": "Blue Hawaii - Blue mirror coating provides a stylish new look.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "B257-05CR",
            "inactive": true,
            "material": "mauipure"
          }
        },
        {
          "id": "257-17C",
          "name": "Black Gloss with Antique Pewter",
          "color": "#808080",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/257-17C_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/257-17C_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/257-17C_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$299.00",
          "salePrice": null,
          "url": "#257-17C",
          "status": null,
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "MauiPure",
          "lensMaterialFull": "MauiPure - The lightest weight choice for long days in the sun.",
          "lensDetailData": {
            "product": "257-17C",
            "inactive": true,
            "material": "mauipure"
          }
        }
      ],
      "callToAction": null,
      "mauijim": true,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null
    },
    {
      "name": "VOYAGER",
      "summary": null,
      "description": null,
      "category": "Classic",
      "rating": [
        "star-full",
        "star-full",
        "star-full",
        "star-full",
        "star-empty"
      ],
      "vip": null,
      "tax": null,
      "variants": [
        {
          "id": "H178-10",
          "name": "Tortoise",
          "color": "#303032",
          "orderMonth": "12",
          "orderYear": "2017",
          "locationCategory": "Online Retailer",
          "purchaseLocation": "Dicks.com",
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/H178-10_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/H178-10_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": true,
          "price": "$219.00",
          "salePrice": null,
          "url": "#H178-10",
          "status": "New",
          "stock": "In Stock",
          "lens": "HCL® Bronze",
          "lensId": "hclbronze",
          "lensFull": "HCL® Bronze - Versatile in changing conditions with a warm tint.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "H178-10",
            "inactive": null,
            "material": "superthin"
          }
        },
        {
          "id": "178-02",
          "name": "Gloss Black",
          "color": "#000",
          "orderMonth": null,
          "orderYear": null,
          "locationCategory": null,
          "purchaseLocation": null,
          "images": {
            "front": "https://s7d2.scene7.com/is/image/mauijim/178-02_front?$config1800$",
            "angle": "https://s7d2.scene7.com/is/image/mauijim/178-02_quarter?$config1800$",
            "side": "https://s7d2.scene7.com/is/image/mauijim/178-02_side?$config1800$"
          },
          "swatch": "https://sprint.design.mauijim.dev.idibgroup.com/assets/images/pattern-placeholder.png",
          "swatchImage": null,
          "active": null,
          "price": "$219.00",
          "salePrice": null,
          "url": "#178-02",
          "status": "New",
          "stock": "In Stock",
          "lens": "Neutral Grey",
          "lensId": "neutralgrey",
          "lensFull": "Neutral Grey - Highest light reduction for rich color and contrast.",
          "lensMaterial": "SuperThin Glass",
          "lensMaterialFull": "SuperThin Glass - Perfect when clarity is your highest priority.",
          "lensDetailData": {
            "product": "178-02",
            "inactive": true,
            "material": "superthin"
          }
        }
      ],
      "callToAction": null,
      "mauijim": true,
      "zeal": null,
      "excludeVariants": null,
      "mymaui": "true",
      "prescription": null
    }
  ]
}
  • Content:
    .popular-items {
      text-align: center;
    }
    
    .popular-items__title {
      margin: 10px 0 0;
      font-size: 2.4rem;
      font-weight: $font-weight-bold;
      letter-spacing: 3px;
      text-transform: uppercase;
    
      @include breakpoint($breakpoint-md) {
        margin-bottom: 35px;
        font-size: 2.7rem;
        letter-spacing: 5px;
        line-height: 3.0rem;
      }
    }
    
    .popular-items__items {
      @include clearfix;
      margin: 0 auto;
      font-size: 0;
    
      @include breakpoint($page-width-max) {
        max-width: none;
        margin: 0 (-1 * $gutter-width-half);
      }
    }
    
    .popular-items__call-to-action {
      margin-top: 30px;
    }
    
  • URL: /components/raw/popular-items/popular-items.scss
  • Filesystem Path: src/components/02-components/popular-items/popular-items.scss
  • Size: 584 Bytes
  • Handle: @popular-items
  • Preview:
  • Filesystem Path: src/components/02-components/popular-items/popular-items.html
  • References (1): @card

There are no notes for this item.