Sidebar Checkout

<aside role="dialog" class="
        modal-custom
        opc-sidebar
        opc-summary-wrapper
        custom-slide
        sidebar-checkout
    " aria-describedby="modal-content-" data-role="modal" data-type="custom" tabindex="0">
    <section class="order-summary" aria-labelledby="summary">
        <h2 class="order-summary__title" id="summary">
            Summary
        </h2>

        <div class="order-summary__details">
            <h3 class="order-summary__subtitle">
                Esimate Shipping and Tax
            </h3>

            <ul class="order-summary__list">
                <li class="order-summary__list-item">
                    <span class="order-summary__label">
                        Subtotal
                    </span>

                    <span class="order-summary__value">
                        $159.95
                    </span>
                </li>
                <li class="order-summary__list-item">
                    <span class="order-summary__label">
                        TAX
                    </span>

                    <span class="order-summary__value">
                        $159.95
                    </span>
                </li>
                <li>
                    <hr class="order-summary__divider">
                </li>
                <li class="order-summary__list-item order-summary__total">
                    <h3 class="order-summary__title-total">
                        Order Total
                    </h3>

                    <span class="order-summary__amount text-right">
                    $159.95
                </span>
                </li>
            </ul>
        </div>

        <div class="order-summary__tab active" data-collapsible="true" role="tablist">
            <div class="order-summary__tab-title" data-role="title" role="tab" aria-selected="true" aria-expanded="true" tabindex="0">
                <span class="order-summary__tab-text">
                    1 Item in Cart
                </span>

                <svg class="icon order-summary__tab-icon" role="img">
    <use xlink:href="/images/icons-sprite.svg#angle-down"></use>
</svg>

            </div>

            <div class="content order-summary__products" data-role="content" role="tabpanel" aria-hidden="false" style="display: block;">
                <div class="order-summary__product-item">
                    <div class="lazyload-wrapper order-summary__product-image">
                        <img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="Simple product oh this is such a loooong name 1"
                            width&#x3D;&quot;78&quot; height&#x3D;&quot;78&quot;>
                    </div>

                    <div class="order-summary__product-info">
                        <div class="order-summary__product-details">
                            <div class="order-summary__product-name">
                                Simple product oh this is such a loooong name 1
                            </div>
                            <div class="order-summary__product-qty">
                                <span>Quantity</span>:
                                <span>1</span>
                            </div>
                        </div>
                        <span class="price order-summary__product-price">
                                    $100
                                </span>
                    </div>
                </div>
                <div class="order-summary__product-item">
                    <div class="lazyload-wrapper order-summary__product-image">
                        <img class="image lazyload " src="data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAABCAQAAABN/Pf1AAAAC0lEQVR42mNkwAIAACoAAgu1Hc4AAAAASUVORK5CYII&#x3D;" data-src="/images/banner/banner-480_480.png" alt="Simple product oh this is such a loooong name 1"
                            width&#x3D;&quot;78&quot; height&#x3D;&quot;78&quot;>
                    </div>

                    <div class="order-summary__product-info">
                        <div class="order-summary__product-details">
                            <div class="order-summary__product-name">
                                Simple product oh this is such a loooong name 1
                            </div>
                            <div class="order-summary__product-qty">
                                <span>Quantity</span>:
                                <span>3</span>
                            </div>
                        </div>
                        <span class="price order-summary__product-price">
                                    $100000
                                </span>
                    </div>
                </div>
            </div>
        </div>

    </section>

    <div class="shipping-information">
        <div class="ship-to">
            <div class="shipping-information__title">
                <span class="shipping-information__title-text">
                Ship To:
            </span>

                <button class="button button--icon shipping-information__button" type="button" aria-label="click to do something">
        <svg
    class="icon button__icon"
    
        role="img"
>
        <title>Arrow left</title>
    <use xlink:href="/images/icons-sprite.svg#edit"></use>
</svg>

</button>

            </div>

            <div class="shipping-information__content">
                John Doe<br> ul. Mostowa 11<br> Poznań, <span>Armed Forces Africa</span> 60-688<br> United States<br>
                <a href="tel:887887887">887887887</a><br>
            </div>
        </div>
        <div>
            <div class="shipping-information__title">
                <span class="shipping-information__title-text">
                Shipping Method:
            </span>

                <button class="button button--icon shipping-information__button" type="button" aria-label="click to do something">
        <svg
    class="icon button__icon"
    
        role="img"
>
        <title>Arrow left</title>
    <use xlink:href="/images/icons-sprite.svg#edit"></use>
</svg>

</button>

            </div>
            <div class="shipping-information__content">
                <span class="value">
                Free Shipping - Free
            </span>
            </div>
        </div>
    </div>

</aside>