<header class="header">
<div class="promo-bar js-promo-bar">
<div class="promo-bar__inner u-page-width-max">
<a class="promo-bar__link" href="#">Free shipping and free returns</a>
<button class="promo-bar__close-button">
<span class="u-visually-hidden">Close</span>
<svg class="icon icon--close">
<use xlink:href="/assets/icons/icons.svg#close"></use>
</svg>
</button>
</div>
</div>
<div class="headroom">
<nav class="header-nav">
<ul class="header-nav__primary">
<li class="header-nav__primary-item header-nav__primary-item--active">
<a class="header-nav__primary-link" href="#">Sunglasses</a>
<div class="header-nav__secondary-wrapper js-header-nav__secondary-wrapper">
<div class="u-page-width-max">
<ul class="header-nav__secondary js-header-nav--secondary">
<li class="header-nav__secondary-item js-header-nav-item">
<button class="header-nav__secondary-button js-header-nav-button">
Shop
<svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</button>
<div class="header-nav__tertiary-wrapper u-page-width-max">
<button class="header-nav__tertiary-back-button js-header-nav-back-button">
<svg class="icon icon--arrow-left">
<use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>
Back
</button>
<ul class="header-nav__tertiary header-nav__tertiary--marketing js-header-nav--tertiary">
<li class="header-nav__tertiary-menu">
<span class="header-nav__tertiary-menu-label">Frame Style</span>
<ul class="header-nav__tertiary-menu-items">
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Aviators</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Classic</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Wrap</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Fashion</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Rectangular</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Cat Eye</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Rimless</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Shield</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link header-nav__tertiary-menu-link--accent" href="#">
All Frames
<svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
</li>
</ul>
</li>
<li class="header-nav__tertiary-menu">
<span class="header-nav__tertiary-menu-label">Activity</span>
<ul class="header-nav__tertiary-menu-items">
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Golf</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Fish</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Surf</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Run</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Drive</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Hike</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Tennis</a>
</li>
</ul>
</li>
<li class="header-nav__tertiary-menu">
<span class="header-nav__tertiary-menu-label">More</span>
<ul class="header-nav__tertiary-menu-items">
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">New Arrivals</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Best Sellers</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Prescription</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Accessories</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Readers</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Blue Hawaii</a>
</li>
</ul>
</li>
</ul>
<div class="header-nav__tertiary-marketing-placement">
<a class="header-nav__tertiary-marketing-link" href="#">
<div class="header-nav__tertiary-marketing-image" style="background-image: url('/assets/images/megamenu-marketing-placement.jpg');"></div>
<div class="header-nav__tertiary-marketing-text">
<span class="header-nav__tertiary-marketing-title">Blue Hawaii</span>
<span class="header-nav__tertiary-marketing-cta">Shop now</span>
</div>
</a>
</div>
</div>
</li>
<li class="header-nav__secondary-item js-header-nav-item">
<a class="header-nav__secondary-link" href="#">
MyMaui
</a>
</li>
<li class="header-nav__secondary-item js-header-nav-item">
<a class="header-nav__secondary-link" href="#">
Home Try-on
</a>
</li>
<li class="header-nav__secondary-item js-header-nav-item">
<a class="header-nav__secondary-link" href="#">
Vintage
</a>
</li>
<li class="header-nav__secondary-item js-header-nav-item">
<a class="header-nav__secondary-link" href="#">
Apparel
</a>
</li>
</ul>
<ul class="header-nav__secondary js-header-nav--secondary">
<li class="header-nav__secondary-item js-header-nav-item">
<a class="header-nav__secondary-link" href="tel:+1800229933">
1-888-666-5905
<svg class="icon icon--action-phone">
<use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>
</a>
</li>
<li class="header-nav__secondary-item js-header-nav-item">
<a class="header-nav__secondary-link" href="#">
Contact Us
<svg class="icon icon--action-mail">
<use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>
</a>
</li>
<li class="header-nav__secondary-item js-header-nav-item">
<a class="header-nav__secondary-link" href="#">
Find a Retailer
<svg class="icon icon--action-location">
<use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>
</a>
</li>
<li class="header-nav__secondary-item js-header-nav-item">
<button class="header-nav__secondary-button js-header-nav-button">
Customer Service
<svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</button>
<div class="header-nav__tertiary-wrapper u-page-width-max">
<button class="header-nav__tertiary-back-button js-header-nav-back-button">
<svg class="icon icon--arrow-left">
<use xlink:href="/assets/icons/icons.svg#arrow-left"></use>
</svg>
Back
</button>
<ul class="header-nav__tertiary js-header-nav--tertiary">
<li class="header-nav__tertiary-menu">
<ul class="header-nav__tertiary-menu-items">
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Order Status</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Repairs</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Returns</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Product Registration</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Prescription</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Retailers</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">FAQs</a>
</li>
<li class="header-nav__tertiary-menu-item">
<a class="header-nav__tertiary-menu-link" href="#">Shipping Information</a>
</li>
</ul>
</li>
</ul>
</div>
</li>
</ul>
<ul class="header-nav__secondary js-header-nav--secondary">
<li class="header-nav__secondary-item js-header-nav-item">
<a class="header-nav__secondary-link" href="#">
Your Account
</a>
</li>
<li class="header-nav__secondary-item js-header-nav-item">
<a class="header-nav__secondary-link" href="#">
Your Orders
</a>
</li>
<li class="header-nav__secondary-item js-header-nav-item">
<a class="header-nav__secondary-link" href="#">
Your Wishlist
</a>
</li>
<li class="header-nav__secondary-item js-header-nav-item">
<a class="header-nav__secondary-link header-nav__secondary-link--logout" href="#">
Logout
</a>
</li>
</ul>
<ul class="header-nav__secondary js-header-nav--secondary">
<li class="header-nav__secondary-item js-header-nav-item">
<a class="header-nav__secondary-link js-modal-open-link" href="#" data-modal-id="country-selector">
United States
<img src="/assets/images/flag-us.png" alt="United States" width="22" height="14">
</a>
</li>
</ul>
</div>
</div>
</li>
<li class="header-nav__primary-item">
<a class="header-nav__primary-link" href="#">Eyeglasses</a>
<div class="header-nav__secondary-wrapper js-header-nav__secondary-wrapper">
<div class="u-page-width-max">
</div>
</div>
</li>
</ul>
</nav>
<div class="header-menu-bar"></div>
<a class="header__logo-wrapper" href="#">
<img class="header__logo" src="/assets/images/mauijim-brand-logo.png" alt="Maui Jim logo">
</a>
<div class="header__menu-icon">
<button class="hamburger-spring header__icon header__icon--menu js-header-icon--menu" type="button">
<span class="u-visually-hidden">Menu</span>
<span class="hamburger-spring__box">
<span class="hamburger-spring__inner"></span>
</span>
</button>
</div>
<div class="header__icons">
<div class="header__icons-inner">
<button class="header__icon header__icon--search js-header-icon--search">
<span class="u-visually-hidden">Search</span>
<svg class="icon icon--search">
<use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>
<svg class="icon icon--close-large">
<use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>
</button>
<button class="header__icon header__icon--wishlist">
<span class="u-visually-hidden">Wishlist</span>
<svg class="icon icon--heart-item">
<use xlink:href="/assets/icons/icons.svg#heart-item"></use>
</svg>
</button>
<button class="header__icon header__icon--account">
<span class="u-visually-hidden">Account</span>
<svg class="icon icon--account">
<use xlink:href="/assets/icons/icons.svg#account"></use>
</svg>
</button>
<button class="header__icon header__icon--cart header__icon--cart--button js-header-icon-empty-cart js-header-icon--cart">
<span class="u-visually-hidden">Cart</span>
<svg class="icon icon--cart">
<use xlink:href="/assets/icons/icons.svg#cart"></use>
</svg>
<svg class="icon icon--cart-item">
<use xlink:href="/assets/icons/icons.svg#cart-item"></use>
</svg>
</button>
<a href="#" class="header__icon header__icon--cart header__icon--cart--link js-header-icon-empty-cart">
<span class="u-visually-hidden">Cart</span>
<svg class="icon icon--cart">
<use xlink:href="/assets/icons/icons.svg#cart"></use>
</svg>
<svg class="icon icon--cart-item">
<use xlink:href="/assets/icons/icons.svg#cart-item"></use>
</svg>
</a>
<button class="header-nav__country js-modal-open-link" data-modal-id="country-selector">
<img class="header-nav__country-image" src="/assets/images/flag-us.png" alt="US" width="31" height="20">
<span class="header-nav__country-label">US</span>
</button>
</div>
</div>
<div class="header-search header-flyout header-flyout--search js-header-search">
<form class="header-search__form">
<input class="header-search__input js-header-search-input" type="text" placeholder="Search on Maui Jim">
<button class="header-search__button js-header-search-button" type="reset">
<span class="u-visually-hidden">Clear</span>
<svg class="icon icon--search">
<use xlink:href="/assets/icons/icons.svg#search"></use>
</svg>
<svg class="icon icon--close-large">
<use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>
</button>
</form>
<div class="header-search__list">
<span class="header-search__list-label">Latest Search</span>
<ul class="header-search__list-items">
<li class="header-search__list-item">
<a class="header-search__list-link js-header-search-list-link" href="#">Koko Head</a>
</li>
<li class="header-search__list-item">
<a class="header-search__list-link js-header-search-list-link" href="#">Tail Slide</a>
</li>
</ul>
</div>
<div class="header-search__list">
<span class="header-search__list-label">Popular Searches</span>
<ul class="header-search__list-items">
<li class="header-search__list-item">
<a class="header-search__list-link js-header-search-list-link" href="#">Aviators</a>
</li>
<li class="header-search__list-item">
<a class="header-search__list-link js-header-search-list-link" href="#">Man</a>
</li>
<li class="header-search__list-item">
<a class="header-search__list-link js-header-search-list-link" href="#">Surf</a>
</li>
<li class="header-search__list-item">
<a class="header-search__list-link js-header-search-list-link" href="#">Vintage</a>
</li>
</ul>
</div>
<div class="header-search__results">
<a class="header-search__result-link" href="#">View all results <svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
<div class="search-autocomplete-result">
<a class="search-autocomplete-result__link" href="#">
<span class="search-autocomplete-result__image-container">
<img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
</span>
<span class="search-autocomplete-result__title">Ho'okipa Reader Universal Fit</span>
</a>
</div>
<div class="search-autocomplete-result">
<a class="search-autocomplete-result__link" href="#">
<span class="search-autocomplete-result__image-container">
<img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
</span>
<span class="search-autocomplete-result__title">Sandy Beach Universal Fit</span>
</a>
</div>
<div class="search-autocomplete-result">
<a class="search-autocomplete-result__link" href="#">
<span class="search-autocomplete-result__image-container">
<img class="search-autocomplete-result__image" src="/assets/images/search-autocomplete-medium.jpg" sizes="(min-width: 681px) 50vw, 25vw"
srcset="/assets/images/search-autocomplete-small.jpg 75w, /assets/images/search-autocomplete-medium.jpg 340w">
</span>
<span class="search-autocomplete-result__title">Hanalei Universal Fit</span>
</a>
</div>
</div>
</div>
<div class="header-cart header-cart--default header-cart--tax header-flyout header-flyout--cart js-header-cart">
<div class="header-cart__header">
<span class="header-cart__title">Your Cart <svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</span>
<span class="header-cart__item-count header-cart__item-count--empty">0 items</span>
</div>
<div class="header-cart__empty">
<div class="header-cart__empty-inner">
<img class="header-cart__empty-brand-logo" src="/assets/images/mauijim-brand-mark-grey-small.png">
<span class="header-cart__empty-label">Your Shopping Cart is Empty</span>
<a class="header-cart__empty-button button button--primary">Shop Now</a>
</div>
</div>
</div>
<div class="header-flyout-overlay js-header-flyout-overlay"></div>
</div>
</header>
<main class="main main--gift-card">
<ul class="breadcrumb u-page-width-max-gutters">
<li class="breadcrumb__item">
<a class="breadcrumb__link" href="#">Maui Jim</a>
</li>
<li class="breadcrumb__item breadcrumb__item--current">
Gift Card
</li>
</ul>
<div class="landing-hero u-page-width-max-gutters">
<img class="landing-hero__image u-object-fit-cover" src="/assets/images/hero-gift-redeem-large.jpg" sizes="(min-width: 1440px) 1420px, (min-width: 769px) calc(100vw - 20px), 100vw" srcset="/assets/images/hero-gift-redeem-small.jpg 900w, /assets/images/hero-gift-redeem-large.jpg 1420w">
<h1 class="landing-hero__title">Redeem Your Gift Card</h1>
</div>
<div class="l-gift-card u-page-width-max-restricted">
<div class="l-gift-card-column l-gift-card-column--left">
<form class="gift-card-form">
<h4 class="gift-card-form__title">Redeem your VIP & Gift Card</h4>
<p class="gift-card-form__details">Provide the 16 digit card Number and the 4 digit PIN number that can be found on the back of your card.</p>
<div class="gift-card-form__form-items">
<div class="form-item form-item--text form-item--redeem-gift-card-number form-item--required">
<label for="redeem-gift-card-number" class="label label--text label--required">VIP or Gift Card Number</label>
<input type="text" id="redeem-gift-card-number" name="number" class="input input--text">
</div>
<div class="form-item form-item--text form-item--redeem-gift-card-pin form-item--required">
<label for="redeem-gift-card-pin" class="label label--text label--required">PIN</label>
<input type="text" id="redeem-gift-card-pin" name="pin" class="input input--text">
</div>
<button class="button button--plain-text js-modal-open-link" data-modal-id="help-text-pin" formnovalidate type="button">What's this?</button>
</div>
<div class="gift-card-form__actions">
<button class="button button--primary">Redeem</button>
<button class="button button--outlined">Check Balance</button>
</div>
</form>
</div>
<div class="l-gift-card-column l-gift-card-column--right">
<div class="assistance-info assistance-info--default">
<h4 class="assistance-info__title">Need assistance?</h4>
<ul class="assistance-info__items">
<li class="assistance-info__item">
<a class="assistance-info__item-value" href="tel:+1800229933">
<svg class="icon icon--action-phone">
<use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>
<span class="assistance-info__item-label">888-666-5905</span>
</a>
</li>
<li class="assistance-info__item">
<a class="assistance-info__item-value" href="mailto:customercare@mauijim.com">
<svg class="icon icon--action-mail">
<use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>
<span class="assistance-info__item-label">customercare@mauijim.com</span>
</a>
</li>
</ul>
</div>
<div class="faqs-link">
<h4 class="faqs-link__title">FAQs</h4>
<p class="faqs-link__content">Check out our Frequently Asked Questions.</p>
<a class="faqs-link__call-to-action button button--outlined" href="#">FAQs</a>
</div>
</div>
</div>
</main>
<div class="subscribe">
<div class="u-page-width-max">
<div class="subscribe__text">
<h5 class="subscribe__header">Subscribe to our 'ohana</h5>
<span class="subscribe__description">Keep up with the Latest Products and News.</span>
</div>
<div class="subscribe-form-wrapper subscribe-form-wrapper--default js-subscribe-form js-subscribe-form--default">
<form class="subscribe-form">
<input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Your Email" autocomplete="email">
<button class="subscribe-form__submit button button--primary">
<span class="subscribe-form__submit-label">Subscribe</span>
<svg class="icon icon--submit-mail">
<use xlink:href="/assets/icons/icons.svg#submit-mail"></use>
</svg>
</button>
</form>
<div class="subscribe-form-status">
<span class="subscribe-form-status__message js-subscribe-status-message"></span>
<span class="subscribe-form-status__close js-subscribe-status-close-button">
<svg class="icon icon--close-large">
<use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>
</span>
</div>
<span class="subscribe-form-legal">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="subscribe-form-legal__link" href="#">Privacy Policy</a>
</span>
</div>
</div>
</div>
<footer class="footer footer--default">
<div class="footer-nav u-page-width-max">
<a class="footer-nav__action footer-nav__action--phone" href="tel:+1800229933">
1-888-666-5905
<svg class="icon icon--action-phone">
<use xlink:href="/assets/icons/icons.svg#action-phone"></use>
</svg>
</a>
<a class="footer-nav__action footer-nav__action--contact" href="#">
Contact Us
<svg class="icon icon--action-mail">
<use xlink:href="/assets/icons/icons.svg#action-mail"></use>
</svg>
</a>
<a class="footer-nav__action footer-nav__action--retailers" href="#">
Find a Retailer
<svg class="icon icon--action-location">
<use xlink:href="/assets/icons/icons.svg#action-location"></use>
</svg>
</a>
<div class="footer-nav__menus">
<div class="footer-nav__menu-column">
<div class="footer-nav__menu js-footer-nav-menu">
<button class="footer-nav__menu-button js-footer-nav-button">
Maui Jim
<svg class="icon icon--arrow-up">
<use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>
<svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
<svg class="icon icon--arrow-down">
<use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>
</button>
<ul class="footer-nav__menu-items">
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">About Us</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Contact Us</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Technology</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Golf Events</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Corporate Gifts</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link js-modal-open-link" href="#" data-modal-id="data-protection">Careers</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Austine Wood Comarow Polage ® Art</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Trade Login</a>
</li>
</ul>
</div>
</div>
<div class="footer-nav__menu-column">
<div class="footer-nav__menu js-footer-nav-menu">
<button class="footer-nav__menu-button js-footer-nav-button">
Customer Service
<svg class="icon icon--arrow-up">
<use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>
<svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
<svg class="icon icon--arrow-down">
<use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>
</button>
<ul class="footer-nav__menu-items">
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Order Status</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Repairs</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Returns</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Product Registration</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Prescription</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Retailers</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">FAQs</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Shipping Information</a>
</li>
</ul>
</div>
</div>
<div class="footer-nav__menu-column">
<div class="footer-nav__menu js-footer-nav-menu">
<button class="footer-nav__menu-button js-footer-nav-button">
Legal
<svg class="icon icon--arrow-up">
<use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>
<svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
<svg class="icon icon--arrow-down">
<use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>
</button>
<ul class="footer-nav__menu-items">
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Terms of Use</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Privacy Policy</a>
</li>
</ul>
</div>
<div class="footer-nav__menu js-footer-nav-menu">
<button class="footer-nav__menu-button js-footer-nav-button">
Gift Cards
<svg class="icon icon--arrow-up">
<use xlink:href="/assets/icons/icons.svg#arrow-up"></use>
</svg>
<svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
<svg class="icon icon--arrow-down">
<use xlink:href="/assets/icons/icons.svg#arrow-down"></use>
</svg>
</button>
<ul class="footer-nav__menu-items">
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">VIP & Gift Cardholder</a>
</li>
<li class="footer-nav__menu-item">
<a class="footer-nav__menu-link" href="#">Shop Gift Card</a>
</li>
</ul>
</div>
</div>
</div>
<div class="footer-nav__forms">
<form class="footer__retailer-form">
<label class="footer__retailer-label" for="footer__retailer-input">Retailers</label>
<input class="footer__retailer-input" name="footer__retailer-input" type="text" placeholder="ZIP code or City" />
<button class="footer__retailer-submit" type="submit">
<svg class="icon icon--angle-right">
<use xlink:href="/assets/icons/icons.svg#angle-right"></use>
</svg>
</button>
</form>
<div class="subscribe-form-wrapper subscribe-form-wrapper--mini js-subscribe-form js-subscribe-form--default">
<form class="subscribe-form">
<input class="subscribe-form__input js-subscribe-form-input" type="text" placeholder="Subscribe to Our 'Ohana" autocomplete="email">
<button class="subscribe-form__submit button button--primary">
<span class="subscribe-form__submit-label">Subscribe</span>
<svg class="icon icon--submit-mail">
<use xlink:href="/assets/icons/icons.svg#submit-mail"></use>
</svg>
</button>
</form>
<div class="subscribe-form-status">
<span class="subscribe-form-status__message js-subscribe-status-message"></span>
<span class="subscribe-form-status__close js-subscribe-status-close-button">
<svg class="icon icon--close-large">
<use xlink:href="/assets/icons/icons.svg#close-large"></use>
</svg>
</span>
</div>
<span class="subscribe-form-legal">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a class="subscribe-form-legal__link" href="#">Privacy Policy</a>
</span>
</div>
</div>
</div>
<div class="footer__bottom">
<div class="u-page-width-max">
<a class="footer__geo footer__geo--country js-modal-open-link" data-modal-id="country-selector" href="#">
<span class="footer__geo-label">Country:</span>
<span class="footer__geo-current">
United Arab Emirates
<svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</span>
</a>
<a class="footer__geo footer__geo--language js-modal-open-link" data-modal-id="language-selector" href="#">
<span class="footer__geo-current">
English
<svg class="icon icon--arrow-right">
<use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</span>
</a>
<ul class="social-icons">
<li class="social-icons__item">
<a class="social-icons__link" href="#"><svg class="icon icon--social-twitter">
<use xlink:href="/assets/icons/icons.svg#social-twitter"></use>
</svg>
</a>
</li>
<li class="social-icons__item">
<a class="social-icons__link" href="#"><svg class="icon icon--social-facebook">
<use xlink:href="/assets/icons/icons.svg#social-facebook"></use>
</svg>
</a>
</li>
<li class="social-icons__item">
<a class="social-icons__link" href="#"><svg class="icon icon--social-instagram">
<use xlink:href="/assets/icons/icons.svg#social-instagram"></use>
</svg>
</a>
</li>
</ul>
</div>
</div>
<div class="footer__copyright">
<img class="footer__copyright-logo" src="/assets/images/mauijim-brand-logo-monochromatic.svg">
<span class="footer__copyright-text">©2016 Maui Jim, Inc. Lahana, Hawaii</span>
</div>
</footer>
{{render (dynamicComponent header)}}
<main class="main main--gift-card">
{{#if breadcrumb}}
{{render '@breadcrumb' breadcrumb}}
{{/if}}
{{#if hero}}
{{render '@landing-hero' hero merge=true}}
{{/if}}
<div class="l-gift-card u-page-width-max-restricted">
{{#each columns}}
<div class="l-gift-card-column l-gift-card-column--{{side}}">
{{#each components}}
{{#if variant}}
{{render (dynamicVariant component variant)}}
{{else}}
{{render (dynamicComponent component)}}
{{/if}}
{{/each}}
</div>
{{/each}}
</div>
</main>
{{#if subscribe}}
{{render (dynamicComponent subscribe)}}
{{/if}}
{{render (dynamicComponent footer)}}
{
"header": "header--maui-jim--empty-cart",
"footer": "footer",
"subscribe": "subscribe",
"breadcrumb": {
"items": [
{
"label": "Maui Jim",
"path": "#"
},
{
"label": "Gift Card",
"current": true
}
]
},
"hero": {
"title": "Redeem Your Gift Card",
"image": {
"small": {
"src": "/assets/images/hero-gift-redeem-small.jpg"
},
"large": {
"src": "/assets/images/hero-gift-redeem-large.jpg"
}
}
},
"columns": [
{
"side": "left",
"components": [
{
"component": "gift-card-form--redeem"
}
]
},
{
"side": "right",
"components": [
{
"component": "assistance-info"
},
{
"component": "faqs-link"
}
]
}
],
"pageModals": [
{
"component": "help-text",
"context": {
"id": "help-text-pin",
"value": "The 4-digit pin is case sensitive; please use capital letters when entering in your pin #."
}
}
]
}
.l-gift-card {
@include breakpoint($breakpoint-sm-only) {
padding-top: 30px;
padding-right: $gutter-width-half;
padding-left: $gutter-width-half;
}
@include breakpoint($breakpoint-md) {
padding-top: 50px;
.form-item--select {
max-width: 340px;
}
}
}
.l-gift-card-column--left {
@include breakpoint($breakpoint-md) {
@include span(6);
}
}
.l-gift-card-column--right {
@include breakpoint($breakpoint-md) {
@include span(5);
float: right;
}
}
There are no notes for this item.