<div class="page-wrapper">

    <header class="header header--checkout">
        <div class="container">
            <div class="header__wrapper">
                <a class="logo header__logo" href="#" aria-label="Homepage">
                    <img class="logo__image " src="/images/logo/logo.svg" alt="Alpaca Logo">
                </a>

                <div class="header__buttons">
                    <a class="
                                header-button
                                button
                                button--icon
                                button--icon-light
                                
                            " href="#" aria-label="cartLink">
                        <svg class="icon header-button__icon" role="img">
                            <title>cart link</title>
                            <use href="/images/icons-sprite.svg#shopping-cart"></use>
                        </svg>

                    </a>

                </div>

            </div>
        </div>
    </header>

    <main class="container" id="maincontent">
        <div class="row success-page">
            <div class="col-xs-12 center-xs">
                <h1 class="heading heading--page">
                    Thank you for your purchase!
                </h1>

                <div class="success-page__order-confirmation">
                    <p>Your order # is: <strong>000000002</strong>.</p>
                    <p>We'll email you an order confirmation with details and tracking info.</p>

                    <a href="#" class="button link--button">
                        Continue Shopping
                    </a>
                </div>

                <!-- Knockout component - registration -->
                <div class="success-page__registration">
                    <div>
                        <p>You can track your order status by creating an account.</p>
                        <p><span>Email Address</span>: <span>john@doe.com</span></p>
                        <a class="
                                action
                                primary
                                link--button
                            " href="#">
                            <span>Create an Account</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

<footer class="footer margin-top-xl footer--checkout">

    <section class="footer__bottom-bar ">
        <div class="footer__bottom-bar-handler container">
            <div class="footer__copyright">
                <small>
                    Copyright © 2019 Alpaca
                </small>
            </div>

            <ul class="
                        footer__payments-list
                        list
                        list--horizontal
                        
                    ">
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon footer__payments-list-icon--visa" role="img">
                        <title>Visa</title>
                        <use href="/images/icons-sprite.svg#visa"></use>
                    </svg>

                </li>
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon" role="img">
                        <title>Master Card</title>
                        <use href="/images/icons-sprite.svg#master-card"></use>
                    </svg>

                </li>
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon" role="img">
                        <title>Discover</title>
                        <use href="/images/icons-sprite.svg#discover"></use>
                    </svg>

                </li>
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon" role="img">
                        <title>American Express</title>
                        <use href="/images/icons-sprite.svg#american-express"></use>
                    </svg>

                </li>
                <li class="list__item">
                    <svg class="icon footer__payments-list-icon footer__payments-list-icon--paypal" role="img">
                        <title>PayPal</title>
                        <use href="/images/icons-sprite.svg#paypal"></use>
                    </svg>

                </li>
            </ul>

            <div class="footer__switchers">
                <div id="language-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher">
                    <ul class="dropdown-list__list">
                        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                            <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content1">
                                German

                                <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                    <title>Arrow Down</title>
                                    <use href="/images/icons-sprite.svg#angle-down"></use>
                                </svg>

                            </a>

                            <div id="dropdown-detailed-content1" class="dropdown-list__content " aria-hidden="true">
                                <ul class="list ">
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                </ul>

                            </div>
                        </li>
                    </ul>
                </div>

                <script type="text/javascript">
                    new DropdownList(document.getElementById('language-dropdown'));
                </script>

                <div id="currency-dropdown" class="dropdown-list dropdown-list--detailed-content footer__dropdown-switcher margin-right-xs">
                    <ul class="dropdown-list__list">
                        <li class="
                    dropdown-list__item
                        dropdown-list__item--collapse
                ">
                            <a class="dropdown-list__label " href="#" aria-expanded="false" aria-controls="dropdown-detailed-content2">
                                USD - US Dollar

                                <svg class="icon dropdown-list__icon" aria-hidden="true" role="img">
                                    <title>Arrow Down</title>
                                    <use href="/images/icons-sprite.svg#angle-down"></use>
                                </svg>

                            </a>

                            <div id="dropdown-detailed-content2" class="dropdown-list__content " aria-hidden="true">
                                <ul class="list ">
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                    <li class="list__item ">
                                        Lorem ipsum

                                    </li>
                                </ul>

                            </div>
                        </li>
                    </ul>
                </div>

                <script type="text/javascript">
                    new DropdownList(document.getElementById('currency-dropdown'));
                </script>

            </div>
        </div>
    </section>

</footer>
<div class="page-wrapper">
    {{ render '@header--checkout' }}

    <main
        class="container"
        id="maincontent"
    >
        <div class="row success-page">
            <div class="col-xs-12 center-xs">
                <h1 class="heading heading--page">
                    Thank you for your purchase!
                </h1>

                <div class="success-page__order-confirmation">
                    <p>Your order # is: <strong>000000002</strong>.</p>
                    <p>We'll email you an order confirmation with details and tracking info.</p>

                    <a
                        href="#"
                        class="button link--button"
                    >
                        Continue Shopping
                    </a>
                </div>

                <!-- Knockout component - registration -->
                <div class="success-page__registration">
                    <div>
                        <p>You can track your order status by creating an account.</p>
                        <p><span>Email Address</span>: <span>john@doe.com</span></p>
                        <a
                            class="
                                action
                                primary
                                link--button
                            "
                            href="#"
                        >
                            <span>Create an Account</span>
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </main>
</div>

{{ render '@footer--checkout' }}
/* No context defined. */
  • Content:
    $success-page__padding        : 60px 0 $spacer--extra-large !default;
    $success-page__button-margin  : $spacer--large auto !default;
    $success-page__button-width   : 100% !default;
    $success-page__button-width\@s: auto !default;
    
    .success-page {
        padding: $success-page__padding;
    
        &__order-confirmation {
            padding: $spacer--large 0;
        }
    
        &__button {
            width: $success-page__button-width;
            margin: $success-page__button-margin;
    
            @include mq($screen-s) {
                width: $success-page__button-width\@s;
            }
        }
    }
    
  • URL: /components/raw/success-page/_success-page.scss
  • Filesystem Path: build/components/Templates/success-page/_success-page.scss
  • Size: 560 Bytes

No notes defined.