<main id="main-section" class="main main--collected-components">
    <div class="l-collected-components l-collected-components--paragraph">
        Handle: <code>@paragraph</code>
        <p class="paragraph u-text-center">This page collects account components for snapshot testing.</p>

    </div>
    <div class="l-collected-components l-collected-components--order">
        Handle: <code>@order</code>
        <div class="order">
            <div class="order__order-summary">
                <span class="order__order-date"><strong>Date:</strong> 2/1/2018</span>
                <span class="order__order-number"><strong>Order N.:</strong> W1517570336340</span>
                <span class="order__order-shipping">
      <strong>Shipping:</strong>
      <span class="order__delivered">Delivered</span>
                </span>
                <div class="order__order-actions">
                    <button class="order__view-details button button--primary">View Details</button>
                </div>
            </div>
            <div class="order__item">
                <a href="#" class="order__item-link">
                    <div class="order__item-image-wrapper">
                        <img class="order__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;225">
                    </div>
                    <div class="order__item-summary">
                        <div class="order__item-name">PEAHI</div>
                        <span class="order__item-info"><strong>Frame:</strong> Gloss Black</span>
                        <span class="order__item-info"><strong>Lens:</strong> Neutral Grey</span>
                        <span class="order__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
                    </div>
                </a>
                <div class="order__item-line-item">
                    <span class="order__item-qty"><strong>Qty:</strong> 2</span>
                    <span class="order__item-price">
        <strong>Total:</strong> $298.00
        <span class="order__item-tax">
          Inkl. MWST
        </span>
                    </span>
                </div>
            </div>
            <div class="order__item">
                <a href="#" class="order__item-link">
                    <div class="order__item-image-wrapper">
                        <img class="order__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;225">
                    </div>
                    <div class="order__item-summary">
                        <div class="order__item-name">WATERWAYS</div>
                        <span class="order__item-info"><strong>Frame:</strong> Olive Stripe</span>
                        <span class="order__item-info"><strong>Lens:</strong> Maui HT™</span>
                        <span class="order__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
                    </div>
                </a>
                <div class="order__item-line-item">
                    <span class="order__item-qty"><strong>Qty:</strong> 2</span>
                    <span class="order__item-price">
        <strong>Total:</strong> $438.00
        <span class="order__item-tax">
          Inkl. MWST
        </span>
                    </span>
                </div>
            </div>
            <div class="order__item">
                <a href="#" class="order__item-link">
                    <div class="order__item-image-wrapper">
                        <img class="order__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;225">
                    </div>
                    <div class="order__item-summary">
                        <div class="order__item-name">KAWIKA</div>
                        <span class="order__item-info"><strong>Frame:</strong> Tortoise with Antique Gold</span>
                        <span class="order__item-info"><strong>Lens:</strong> HCL® Bronze</span>
                        <span class="order__item-info"><strong>Lens Material:</strong> MauiPure</span>
                    </div>
                </a>
                <div class="order__item-line-item">
                    <span class="order__item-qty"><strong>Qty:</strong> 3</span>
                    <span class="order__item-price">
        <strong>Total:</strong> $897.00
      </span>
                </div>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--order-details">
        Handle: <code>@order-details</code>
        <form class="order-details">
            <h1 class="order-details__title">Order Details</h1>
            <div class="order">
                <div class="order__order-summary">
                    <span class="order__order-date"><strong>Date:</strong> 29/8/2018</span>
                    <span class="order__order-number"><strong>Order N.:</strong> W1538237951704</span>
                    <span class="order__order-shipping">
        <strong>Shipping:</strong>
        <a href="" class="order__track-delivery">Track your Delivery <svg class="icon icon--arrow-right">
  <use xlink:href="/assets/icons/icons.svg#arrow-right"></use>
</svg>
</a>
      </span>
                </div>
                <div class="order__item">
                    <a href="#" class="order__item-link">
                        <div class="order__item-image-wrapper">
                            <img class="order__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="order__item-summary">
                            <div class="order__item-name">PEAHI</div>
                            <span class="order__item-info"><strong>Frame:</strong> Gloss Black</span>
                            <span class="order__item-info"><strong>Lens:</strong> Neutral Grey</span>
                            <span class="order__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
                            <span class="order__item-info"><strong>SKU:</strong> 202-02</span>
                        </div>
                    </a>
                    <div class="order__item-line-item">
                        <span class="order__item-qty"><strong>Qty:</strong> 3</span>
                        <span class="order__item-price">
          <strong>Total:</strong> $447.00
          <span class="order__item-tax">
            Inkl. MWST
          </span>
                        </span>
                    </div>
                </div>
                <div class="order__item">
                    <a href="#" class="order__item-link">
                        <div class="order__item-image-wrapper">
                            <img class="order__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="order__item-summary">
                            <div class="order__item-name">WATERWAYS</div>
                            <span class="order__item-info"><strong>Frame:</strong> Olive Stripe</span>
                            <span class="order__item-info"><strong>Lens:</strong> Maui HT™</span>
                            <span class="order__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
                            <span class="order__item-info"><strong>SKU:</strong> HTS267-15C</span>
                        </div>
                    </a>
                    <div class="order__item-line-item">
                        <span class="order__item-qty"><strong>Qty:</strong> 1</span>
                        <span class="order__item-price">
          <strong>Total:</strong> $219.00
          <span class="order__item-tax">
            Inkl. MWST
          </span>
                        </span>
                    </div>
                </div>
                <div class="order__item">
                    <a href="#" class="order__item-link">
                        <div class="order__item-image-wrapper">
                            <img class="order__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="order__item-summary">
                            <div class="order__item-name">KAWIKA</div>
                            <span class="order__item-info"><strong>Frame:</strong> Tortoise with Antique Gold</span>
                            <span class="order__item-info"><strong>Lens:</strong> HCL® Bronze</span>
                            <span class="order__item-info"><strong>Lens Material:</strong> MauiPure</span>
                            <span class="order__item-info"><strong>SKU:</strong> H257-16C</span>
                        </div>
                    </a>
                    <div class="order__item-line-item">
                        <span class="order__item-qty"><strong>Qty:</strong> 1</span>
                        <span class="order__item-price">
          <strong>Total:</strong> $299.00
        </span>
                    </div>
                </div>
                <div class="order__item">
                    <a href="#" class="order__item-link">
                        <div class="order__item-image-wrapper">
                            <img class="order__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="order__item-summary">
                            <div class="order__item-name">VOYAGER</div>
                            <span class="order__item-info"><strong>Frame:</strong> Tortoise</span>
                            <span class="order__item-info"><strong>Lens:</strong> HCL® Bronze</span>
                            <span class="order__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
                            <span class="order__item-info"><strong>SKU:</strong> H178-10</span>
                        </div>
                    </a>
                    <div class="order__item-line-item">
                        <span class="order__item-qty"><strong>Qty:</strong> 2</span>
                        <span class="order__item-price">
          <strong>Total:</strong> $438.00
        </span>
                    </div>
                </div>
                <div class="order__item">
                    <a href="#" class="order__item-link">
                        <div class="order__item-image-wrapper">
                            <img class="order__item-image" src="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="order__item-summary">
                            <div class="order__item-name">LEIA</div>
                            <span class="order__item-info"><strong>Frame:</strong> Brown Feathered</span>
                            <span class="order__item-info"><strong>Lens:</strong> Maui Rose®</span>
                            <span class="order__item-info"><strong>Lens Material:</strong> SuperThin Glass</span>
                            <span class="order__item-info"><strong>SKU:</strong> RS708-26D</span>
                        </div>
                    </a>
                    <div class="order__item-line-item">
                        <span class="order__item-qty"><strong>Qty:</strong> 1</span>
                        <span class="order__item-price">
          <strong>Total:</strong> $299.00
        </span>
                    </div>
                </div>
            </div>
            <div class="order-details__full-info">
                <div class="order-details__billing-info">
                    <div class="order-details__label">Billing Information</div>
                    <p class="order-details__card">
                        American Express<br> John Doe<br> ****-****-**12-3456
                        <br> 10/2018
                        <br>
                    </p>
                    <p class="order-details__address">
                        John Doe<br> One Aloha Lane<br> Peoria, IL 61615<br> United States<br>
                    </p>
                </div>
                <div class="order-details__shipping-info">
                    <div class="order-details__label">Shipping Address</div>
                    <p class="order-details__address">
                        John Doe<br> One Aloha Lane<br> Peoria, IL 61615<br> United States<br>
                    </p>
                </div>
                <div class="order-details__amount-info">
                    <div class="order-details__label">Amount</div>
                    <p class="order-details__amount">
                        <strong>Subtotal (3):</strong> $1096.00<br>
                        <strong>Gift Bag (1):</strong> $3.99<br>
                        <strong>Delivery:</strong> $0.00<br>
                        <strong>Tax:</strong> $48.99<br>
                        <strong>Total:</strong> $526.99<br>
                    </p>
                </div>
            </div>
            <div class="order-details__actions">
                <button class="button button--primary">Back to Orders</button>
            </div>
        </form>

    </div>
    <div class="l-collected-components l-collected-components--register-product--maui-jim">
        Handle: <code>@register-product--maui-jim</code>
        <div class="register-product">
            <h1 class="register-product__title">Your Registered Products</h1>
            <div class="register-product__categories">
                <span class="register-product__date-column">Order date</span>
                <span class="register-product__style-column">Style</span>
                <span class="register-product__location-column">Location of Purchase</span>
                <span class="register-product__details-column">Details</span>
            </div>
            <div class="register-product__items">
                <div class="register-product__item">
                    <a class="register-product__item-link" href="#">
                        <div class="register-product__order-date">12/2017</div>
                        <div class="register-product__style-wrap">
                            <div class="register-product__item-image-wrapper">
                                <img class="register-product__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;225">
                            </div>
                            <div class="register-product__categories-row">
                                <span class="register-product__date-column">Order date</span>
                                <span class="register-product__style-column">Style</span>
                            </div>
                            <div class="register-product__item-styles">
                                <div class="register-product__order-date-wrapper">12/2017</div>
                                <div class="register-product__item-style-wrapper">
                                    <div class="register-product__item-style-name">
                                        PEAHI
                                    </div>
                                    <div class="register-product__style-item-wrapper">
                                        <span class="register-product__item-section">MYMAUI</span>
                                        <span class="register-product__item-sku">202-02</span>
                                        <span class="register-product__item-section">PRESCRIPTION</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="register-product__categories-row">
                            <span class="register-product__location-column">Location of Purchase</span>
                            <span class="register-product__details-column">Details</span>
                        </div>
                        <div class="register-product__item-location-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-location">Online Retailer</span>
                            </div>
                        </div>
                        <div class="register-product__item-details-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-detail">Dicks.com</span>
                            </div>
                        </div>

                    </a>
                </div>
                <div class="register-product__item">
                    <a class="register-product__item-link" href="#">
                        <div class="register-product__order-date">12/2017</div>
                        <div class="register-product__style-wrap">
                            <div class="register-product__item-image-wrapper">
                                <img class="register-product__item-image-empty" src="/assets/images/empty-image.png">
                            </div>
                            <div class="register-product__categories-row">
                                <span class="register-product__date-column">Order date</span>
                                <span class="register-product__style-column">Style</span>
                            </div>
                            <div class="register-product__item-styles">
                                <div class="register-product__order-date-wrapper">12/2017</div>
                                <div class="register-product__item-style-wrapper">
                                    <div class="register-product__item-style-name">
                                        'UNKNOWN INPUT'
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="register-product__categories-row">
                            <span class="register-product__location-column">Location of Purchase</span>
                            <span class="register-product__details-column">Details</span>
                        </div>
                        <div class="register-product__item-location-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-location">Retail Location</span>
                            </div>
                        </div>
                        <div class="register-product__item-details-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-detail">Sunglass Hut</span>
                            </div>
                        </div>

                    </a>
                </div>
                <div class="register-product__item">
                    <a class="register-product__item-link" href="#">
                        <div class="register-product__order-date">12/2017</div>
                        <div class="register-product__style-wrap">
                            <div class="register-product__item-image-wrapper">
                                <img class="register-product__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;225">
                            </div>
                            <div class="register-product__categories-row">
                                <span class="register-product__date-column">Order date</span>
                                <span class="register-product__style-column">Style</span>
                            </div>
                            <div class="register-product__item-styles">
                                <div class="register-product__order-date-wrapper">12/2017</div>
                                <div class="register-product__item-style-wrapper">
                                    <div class="register-product__item-style-name">
                                        KAWIKA
                                    </div>
                                    <div class="register-product__style-item-wrapper">
                                        <span class="register-product__item-section">MYMAUI</span>
                                        <span class="register-product__item-sku">H257-16C</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="register-product__categories-row">
                            <span class="register-product__location-column">Location of Purchase</span>
                            <span class="register-product__details-column">Details</span>
                        </div>
                        <div class="register-product__item-location-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-location">MauiJim.com</span>
                            </div>
                        </div>
                        <div class="register-product__item-details-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-detail">W0101010101010</span>
                            </div>
                        </div>

                    </a>
                </div>
                <div class="register-product__item">
                    <a class="register-product__item-link" href="#">
                        <div class="register-product__order-date">12/2017</div>
                        <div class="register-product__style-wrap">
                            <div class="register-product__item-image-wrapper">
                                <img class="register-product__item-image-empty" src="/assets/images/empty-image.png">
                            </div>
                            <div class="register-product__categories-row">
                                <span class="register-product__date-column">Order date</span>
                                <span class="register-product__style-column">Style</span>
                            </div>
                            <div class="register-product__item-styles">
                                <div class="register-product__order-date-wrapper">12/2017</div>
                                <div class="register-product__item-style-wrapper">
                                    <div class="register-product__item-style-name">
                                        'UNKNOWN INPUT'
                                    </div>
                                    <div class="register-product__style-item-wrapper">
                                        <span class="register-product__item-section">MYMAUI</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="register-product__categories-row">
                            <span class="register-product__location-column">Location of Purchase</span>
                            <span class="register-product__details-column">Details</span>
                        </div>
                        <div class="register-product__item-location-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-location">MauiJim.com</span>
                            </div>
                        </div>
                        <div class="register-product__item-details-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-detail">W0101010101010</span>
                            </div>
                        </div>

                    </a>
                </div>
                <div class="register-product__item">
                    <a class="register-product__item-link" href="#">
                        <div class="register-product__order-date">12/2017</div>
                        <div class="register-product__style-wrap">
                            <div class="register-product__item-image-wrapper">
                                <img class="register-product__item-image-empty" src="/assets/images/empty-image.png">
                            </div>
                            <div class="register-product__categories-row">
                                <span class="register-product__date-column">Order date</span>
                                <span class="register-product__style-column">Style</span>
                            </div>
                            <div class="register-product__item-styles">
                                <div class="register-product__order-date-wrapper">12/2017</div>
                                <div class="register-product__item-style-wrapper">
                                    <div class="register-product__item-style-name">
                                        'UNKNOWN INPUT'
                                    </div>
                                    <div class="register-product__style-item-wrapper">
                                        <span class="register-product__item-section">PRESCRIPTION</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="register-product__categories-row">
                            <span class="register-product__location-column">Location of Purchase</span>
                            <span class="register-product__details-column">Details</span>
                        </div>
                        <div class="register-product__item-location-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-location">Retail Location</span>
                            </div>
                        </div>
                        <div class="register-product__item-details-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-detail">Dr. Joe Optician</span>
                            </div>
                        </div>

                    </a>
                </div>
                <div class="register-product__item">
                    <a class="register-product__item-link" href="#">
                        <div class="register-product__order-date">12/2017</div>
                        <div class="register-product__style-wrap">
                            <div class="register-product__item-image-wrapper">
                                <img class="register-product__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H711-18_front?$config1800$&amp;wid&#x3D;225">
                            </div>
                            <div class="register-product__categories-row">
                                <span class="register-product__date-column">Order date</span>
                                <span class="register-product__style-column">Style</span>
                            </div>
                            <div class="register-product__item-styles">
                                <div class="register-product__order-date-wrapper">12/2017</div>
                                <div class="register-product__item-style-wrapper">
                                    <div class="register-product__item-style-name">
                                        KOHALA
                                    </div>
                                    <div class="register-product__style-item-wrapper">
                                        <span class="register-product__item-sku">H711-18</span>
                                        <span class="register-product__item-section">PRESCRIPTION</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="register-product__categories-row">
                            <span class="register-product__location-column">Location of Purchase</span>
                            <span class="register-product__details-column">Details</span>
                        </div>
                        <div class="register-product__item-location-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-location">Retail Location</span>
                            </div>
                        </div>
                        <div class="register-product__item-details-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-detail">Steve Optical</span>
                            </div>
                        </div>

                    </a>
                </div>
                <div class="register-product__item">
                    <a class="register-product__item-link" href="#">
                        <div class="register-product__order-date">12/2017</div>
                        <div class="register-product__style-wrap">
                            <div class="register-product__item-image-wrapper">
                                <img class="register-product__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H706-16C_front?$config1800$&amp;wid&#x3D;225">
                            </div>
                            <div class="register-product__categories-row">
                                <span class="register-product__date-column">Order date</span>
                                <span class="register-product__style-column">Style</span>
                            </div>
                            <div class="register-product__item-styles">
                                <div class="register-product__order-date-wrapper">12/2017</div>
                                <div class="register-product__item-style-wrapper">
                                    <div class="register-product__item-style-name">
                                        STILLWATER
                                    </div>
                                    <div class="register-product__style-item-wrapper">
                                        <span class="register-product__item-section">MYMAUI</span>
                                        <span class="register-product__item-sku">H706-16C</span>
                                        <span class="register-product__item-section">PRESCRIPTION</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="register-product__categories-row">
                            <span class="register-product__location-column">Location of Purchase</span>
                            <span class="register-product__details-column">Details</span>
                        </div>
                        <div class="register-product__item-location-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-location">Retail Location</span>
                            </div>
                        </div>
                        <div class="register-product__item-details-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-detail">Steve Optical</span>
                            </div>
                        </div>

                    </a>
                </div>
                <div class="register-product__item">
                    <a class="register-product__item-link" href="#">
                        <div class="register-product__order-date">12/2017</div>
                        <div class="register-product__style-wrap">
                            <div class="register-product__item-image-wrapper">
                                <img class="register-product__item-image" src="/assets/images/t-shirt.png">
                            </div>
                            <div class="register-product__categories-row">
                                <span class="register-product__date-column">Order date</span>
                                <span class="register-product__style-column">Style</span>
                            </div>
                            <div class="register-product__item-styles">
                                <div class="register-product__order-date-wrapper">12/2017</div>
                                <div class="register-product__item-style-wrapper">
                                    <div class="register-product__item-style-name">
                                        BORN AND RAISED BAMBOO SHORT SLEEVE
                                    </div>
                                    <div class="register-product__style-item-wrapper">
                                        <span class="register-product__item-section">MYMAUI</span>
                                        <span class="register-product__item-sku">H712-18</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="register-product__categories-row">
                            <span class="register-product__location-column">Location of Purchase</span>
                            <span class="register-product__details-column">Details</span>
                        </div>
                        <div class="register-product__item-location-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-location">Online Retailer</span>
                            </div>
                        </div>
                        <div class="register-product__item-details-wrap">
                            <div class="register-product__item-style-wrapper">
                                <span class="register-product__item-detail">Dicks.com</span>
                            </div>
                        </div>

                    </a>
                </div>
            </div>
            <div class="register-product__actions">
                <button class="register-product__show-all button button--primary">Start a Repair</button>
                <button class="register-product__show-all button button--primary">Start a Return</button>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--wishlist--maui-jim">
        Handle: <code>@wishlist--maui-jim</code>
        <div class="wishlist">
            <h1 class="wishlist__title">Your Wishlist</h1>
            <div class="wishlist__items">
                <div class="wishlist__item">
                    <a class="wishlist__item-link" href="#">
                        <div class="wishlist__item-image-wrapper">
                            <img class="wishlist__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="wishlist__item-summary">
                            <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-half">
                                    <svg class="icon icon--star-half">
  <use xlink:href="/assets/icons/icons.svg#star-half"></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>

                            <div class="wishlist__item-name">PEAHI</div>
                            <div class="wishlist__item-info-wrapper">
                                <span class="wishlist__item-info">Gloss Black</span>
                                <span class="wishlist__item-info">Neutral Grey</span>
                                <span class="wishlist__item-info">SuperThin Glass</span>
                            </div>
                        </div>
                    </a>
                    <div class="wishlist__item-actions">
                        <div class="wishlist__item-price-wrapper">
                            <span class="wishlist__item-price">$149.00</span>
                            <span class="wishlist__item-tax">Inkl. MWST</span>
                        </div>
                        <form class="wishlist__item-add-to-cart">
                            <button class="button button--primary">Add to Cart</button>

                        </form>
                        <form class="wishlist__item-remove">
                            <button class="button button--plain-text">Remove</button>

                        </form>
                    </div>
                </div>
                <div class="wishlist__item">
                    <a class="wishlist__item-link" href="#">
                        <div class="wishlist__item-image-wrapper">
                            <img class="wishlist__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="wishlist__item-summary">
                            <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-half">
                                    <svg class="icon icon--star-half">
  <use xlink:href="/assets/icons/icons.svg#star-half"></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>

                            <div class="wishlist__item-name">WATERWAYS</div>
                            <div class="wishlist__item-info-wrapper">
                                <span class="wishlist__item-info">Olive Stripe</span>
                                <span class="wishlist__item-info">Maui HT™</span>
                                <span class="wishlist__item-info">SuperThin Glass</span>
                            </div>
                        </div>
                    </a>
                    <div class="wishlist__item-actions">
                        <div class="wishlist__item-price-wrapper">
                            <span class="wishlist__item-price">$219.00</span>
                            <span class="wishlist__item-tax">Inkl. MWST</span>
                        </div>
                        <form class="wishlist__item-add-to-cart">
                            <button class="button button--primary">Add to Cart</button>

                        </form>
                        <form class="wishlist__item-remove">
                            <button class="button button--plain-text">Remove</button>

                        </form>
                    </div>
                </div>
                <div class="wishlist__item">
                    <a class="wishlist__item-link" href="#">
                        <div class="wishlist__item-image-wrapper">
                            <img class="wishlist__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="wishlist__item-summary">
                            <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-half">
                                    <svg class="icon icon--star-half">
  <use xlink:href="/assets/icons/icons.svg#star-half"></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>

                            <div class="wishlist__item-name">KAWIKA</div>
                            <div class="wishlist__item-info-wrapper">
                                <span class="wishlist__item-info">Tortoise with Antique Gold</span>
                                <span class="wishlist__item-info">HCL® Bronze</span>
                                <span class="wishlist__item-info">MauiPure</span>
                            </div>
                        </div>
                    </a>
                    <div class="wishlist__item-actions">
                        <div class="wishlist__item-price-wrapper">
                            <span class="wishlist__item-price">$299.00</span>
                        </div>
                        <form class="wishlist__item-add-to-cart">
                            <button class="button button--primary">Add to Cart</button>

                        </form>
                        <form class="wishlist__item-remove">
                            <button class="button button--plain-text">Remove</button>

                        </form>
                    </div>
                </div>
                <div class="wishlist__item">
                    <a class="wishlist__item-link" href="#">
                        <div class="wishlist__item-image-wrapper">
                            <img class="wishlist__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="wishlist__item-summary">
                            <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-half">
                                    <svg class="icon icon--star-half">
  <use xlink:href="/assets/icons/icons.svg#star-half"></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>

                            <div class="wishlist__item-name">VOYAGER</div>
                            <div class="wishlist__item-info-wrapper">
                                <span class="wishlist__item-info">Tortoise</span>
                                <span class="wishlist__item-info">HCL® Bronze</span>
                                <span class="wishlist__item-info">SuperThin Glass</span>
                            </div>
                        </div>
                    </a>
                    <div class="wishlist__item-actions">
                        <div class="wishlist__item-price-wrapper">
                            <span class="wishlist__item-price">$219.00</span>
                        </div>
                        <form class="wishlist__item-add-to-cart">
                            <button class="button button--primary">Add to Cart</button>

                        </form>
                        <form class="wishlist__item-remove">
                            <button class="button button--plain-text">Remove</button>

                        </form>
                    </div>
                </div>
                <div class="wishlist__item">
                    <a class="wishlist__item-link" href="#">
                        <div class="wishlist__item-image-wrapper">
                            <img class="wishlist__item-image" src="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="wishlist__item-summary">
                            <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-half">
                                    <svg class="icon icon--star-half">
  <use xlink:href="/assets/icons/icons.svg#star-half"></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>

                            <div class="wishlist__item-name">LEIA</div>
                            <div class="wishlist__item-info-wrapper">
                                <span class="wishlist__item-info">Brown Feathered</span>
                                <span class="wishlist__item-info">Maui Rose®</span>
                                <span class="wishlist__item-info">SuperThin Glass</span>
                            </div>
                        </div>
                    </a>
                    <div class="wishlist__item-actions">
                        <div class="wishlist__item-price-wrapper">
                            <span class="wishlist__item-price">$299.00</span>
                        </div>
                        <form class="wishlist__item-add-to-cart">
                            <button class="button button--primary">Add to Cart</button>

                        </form>
                        <form class="wishlist__item-remove">
                            <button class="button button--plain-text">Remove</button>

                        </form>
                    </div>
                </div>
            </div>
            <div class="wishlist__actions">
                <button class="wishlist__show-all button button--outlined">Show All (15)</button>
            </div>
        </div>

    </div>
    <div class="l-collected-components l-collected-components--wishlist--optical">
        Handle: <code>@wishlist--optical</code>
        <div class="wishlist">
            <h1 class="wishlist__title">Your Wishlist</h1>
            <div class="wishlist__items">
                <div class="wishlist__item">
                    <a class="wishlist__item-link" href="#">
                        <div class="wishlist__item-image-wrapper">
                            <img class="wishlist__item-image" src="https://mauijim.scene7.com/is/image/mauijim/202-02_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="wishlist__item-summary">

                            <div class="wishlist__item-name">PEAHI</div>
                            <div class="wishlist__item-info-wrapper">
                                <span class="wishlist__item-info">Gloss Black</span>
                                <span class="wishlist__item-info">Neutral Grey</span>
                                <span class="wishlist__item-info">SuperThin Glass</span>
                            </div>
                        </div>
                    </a>
                    <div class="wishlist__item-actions">
                        <form class="wishlist__item-find-an-optician">
                            <button class="button button--outlined">Find an Optician</button>

                        </form>
                        <form class="wishlist__item-remove">
                            <button class="button button--plain-text">Remove</button>

                        </form>
                    </div>
                </div>
                <div class="wishlist__item">
                    <a class="wishlist__item-link" href="#">
                        <div class="wishlist__item-image-wrapper">
                            <img class="wishlist__item-image" src="https://s7d2.scene7.com/is/image/mauijim/HTS267-15C_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="wishlist__item-summary">

                            <div class="wishlist__item-name">WATERWAYS</div>
                            <div class="wishlist__item-info-wrapper">
                                <span class="wishlist__item-info">Olive Stripe</span>
                                <span class="wishlist__item-info">Maui HT™</span>
                                <span class="wishlist__item-info">SuperThin Glass</span>
                            </div>
                        </div>
                    </a>
                    <div class="wishlist__item-actions">
                        <form class="wishlist__item-find-an-optician">
                            <button class="button button--outlined">Find an Optician</button>

                        </form>
                        <form class="wishlist__item-remove">
                            <button class="button button--plain-text">Remove</button>

                        </form>
                    </div>
                </div>
                <div class="wishlist__item">
                    <a class="wishlist__item-link" href="#">
                        <div class="wishlist__item-image-wrapper">
                            <img class="wishlist__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H257-16C_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="wishlist__item-summary">

                            <div class="wishlist__item-name">KAWIKA</div>
                            <div class="wishlist__item-info-wrapper">
                                <span class="wishlist__item-info">Tortoise with Antique Gold</span>
                                <span class="wishlist__item-info">HCL® Bronze</span>
                                <span class="wishlist__item-info">MauiPure</span>
                            </div>
                        </div>
                    </a>
                    <div class="wishlist__item-actions">
                        <form class="wishlist__item-find-an-optician">
                            <button class="button button--outlined">Find an Optician</button>

                        </form>
                        <form class="wishlist__item-remove">
                            <button class="button button--plain-text">Remove</button>

                        </form>
                    </div>
                </div>
                <div class="wishlist__item">
                    <a class="wishlist__item-link" href="#">
                        <div class="wishlist__item-image-wrapper">
                            <img class="wishlist__item-image" src="https://s7d2.scene7.com/is/image/mauijim/H178-10_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="wishlist__item-summary">

                            <div class="wishlist__item-name">VOYAGER</div>
                            <div class="wishlist__item-info-wrapper">
                                <span class="wishlist__item-info">Tortoise</span>
                                <span class="wishlist__item-info">HCL® Bronze</span>
                                <span class="wishlist__item-info">SuperThin Glass</span>
                            </div>
                        </div>
                    </a>
                    <div class="wishlist__item-actions">
                        <form class="wishlist__item-find-an-optician">
                            <button class="button button--outlined">Find an Optician</button>

                        </form>
                        <form class="wishlist__item-remove">
                            <button class="button button--plain-text">Remove</button>

                        </form>
                    </div>
                </div>
                <div class="wishlist__item">
                    <a class="wishlist__item-link" href="#">
                        <div class="wishlist__item-image-wrapper">
                            <img class="wishlist__item-image" src="https://s7d2.scene7.com/is/image/mauijim/RS708-26D_front?$config1800$&amp;wid&#x3D;225">
                        </div>
                        <div class="wishlist__item-summary">

                            <div class="wishlist__item-name">LEIA</div>
                            <div class="wishlist__item-info-wrapper">
                                <span class="wishlist__item-info">Brown Feathered</span>
                                <span class="wishlist__item-info">Maui Rose®</span>
                                <span class="wishlist__item-info">SuperThin Glass</span>
                            </div>
                        </div>
                    </a>
                    <div class="wishlist__item-actions">
                        <form class="wishlist__item-find-an-optician">
                            <button class="button button--outlined">Find an Optician</button>

                        </form>
                        <form class="wishlist__item-remove">
                            <button class="button button--plain-text">Remove</button>

                        </form>
                    </div>
                </div>
            </div>
            <div class="wishlist__actions">
                <button class="wishlist__show-all button button--outlined">Show All (15)</button>
            </div>
        </div>

    </div>
</main>
{{#if header}}
{{render (dynamicComponent header)}}
{{/if}}
<main id="main-section" class="main main--collected-components">
  {{#each components}}
  <div class="l-collected-components l-collected-components--{{component}}{{#each modifiers}} l-collected-components--{{this}}{{/each}}">
    Handle: <code>@{{component}}</code>
    {{render (dynamicComponent component) context merge=true}}
  </div>
  {{/each}}
</main>
{{#if footer}}
{{render '@subscribe'}}
{{render (dynamicComponent footer)}}
{{/if}}
{
  "snapshot": true,
  "pageCss": [
    "account"
  ],
  "components": [
    {
      "component": "paragraph",
      "context": {
        "value": "This page collects account components for snapshot testing.",
        "classes": [
          "u-text-center"
        ]
      }
    },
    {
      "component": "order"
    },
    {
      "component": "order-details"
    },
    {
      "component": "register-product--maui-jim"
    },
    {
      "component": "wishlist--maui-jim"
    },
    {
      "component": "wishlist--optical"
    }
  ]
}
  • Content:
    .l-collected-components {
      position: relative;
      margin: 2rem 0;
      padding: 2rem 0;
    
      & + &::before {
        position: absolute;
        top: 0;
        left: 50%;
        width: 100vw;
        height: .1rem;
        margin-left: -50vw;
        background-color: $color-light;
        content: '';
      }
    
      &--narrow {
        max-width: 50rem;
        margin-right: auto;
        margin-left: auto;
      }
    }
    
  • URL: /components/raw/collected-components/collected-components.scss
  • Filesystem Path: src/components/03-pages/collected-components/collected-components.scss
  • Size: 363 Bytes

There are no notes for this item.