Done: Order placed
Packed within 24 hours
Delivered by Thu, Oct 8

Order summary

Heritage Backpack Forest green · 26 L · Qty 1 $189.00
Steel Water Bottle Qty 2 $48.00

Subtotal: $237.00
Discount AUTUMN10: −$23.70
Shipping: Free
Tax: $17.06
Total paid: $230.36

Delivery and payment

Shipping address: Anna Smith
Andrássy út 12
1061 Budapest
Hungary
Shipping method: Standard (3–5 business days)
Payment: Visa ending in 4242

@use 'sprucecss/scss/spruce' as *;

.order-confirmation {
  @include layout-stack('l');

  &__header {
    text-align: center;
    @include layout-stack('xs');
  }

  &__icon {
    align-items: center;
    aspect-ratio: 1;
    background-color: color-alpha('success', 0.15, 'alert');
    border-radius: 50%;
    color: color('success', 'alert');
    display: inline-flex;
    inline-size: 4rem;
    justify-content: center;
    margin-block-end: spacer('xs');

    svg {
      block-size: 2rem;
      inline-size: 2rem;
    }

    @include motion-safe {
      animation: order-confirmation-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    }
  }

  &__eyebrow {
    color: color('muted');
    font-size: config('font-size-sm', $typography);
    font-weight: 600;
  }

  &__title {
    font-size: font-size('h2');

    &:focus {
      outline: none;
    }
  }

  &__text {
    margin-inline: auto;
    max-inline-size: 32rem;
  }

  &__next {
    counter-reset: order-confirmation;
    display: grid;
    gap: spacer('xs');
    // The parent's layout-stack sets the margins.
    list-style: none;
    padding: 0;

    @include breakpoint('sm') {
      grid-auto-columns: minmax(0, 1fr);
      grid-auto-flow: column;
    }

    // The items sit side by side: clear the stack margins of the base list style.
    > li {
      margin-block: 0;
    }
  }

  &__step {
    align-items: center;
    background-color: color('surface-muted');
    border-radius: radius('md');
    counter-increment: order-confirmation;
    display: flex;
    font-size: config('font-size-sm', $typography);
    gap: spacer('xs');
    padding: spacer('xs') spacer('s');

    &::before {
      align-items: center;
      aspect-ratio: 1;
      border: 2px solid color('border-strong');
      border-radius: 50%;
      color: color('muted');
      content: counter(order-confirmation);
      display: inline-flex;
      flex-shrink: 0;
      font-size: 0.75rem;
      font-weight: 700;
      inline-size: 1.5rem;
      justify-content: center;
    }

    &--done {
      color: color('heading');
      font-weight: 600;

      &::before {
        background-color: color('success', 'alert');
        border-color: color('success', 'alert');
        color: hsl(0deg 0% 100%);
        content: '✓';
      }
    }
  }

  &__grid {
    @include layout-grid('m', 18rem);
  }

  &__card,
  &__account {
    background-color: color('surface');
    border: config('border-width-base', $display) solid color('border');
    border-radius: radius('lg');
    padding: spacer('m');
  }

  &__card {
    @include layout-stack('s');
  }

  &__card-title {
    font-size: font-size('h5');
    margin: 0;
  }

  &__items {
    // The parent's layout-stack sets the margins.
    list-style: none;
    padding: 0;
    @include layout-stack('s');

    li {
      align-items: center;
      display: grid;
      gap: spacer('s');
      grid-template-columns: 3.5rem minmax(0, 1fr) auto;
    }

    img {
      aspect-ratio: 1;
      border-radius: radius('md');
      inline-size: 3.5rem;
      object-fit: cover;
    }
  }

  &__item-name {
    color: color('heading');
    display: grid;
    font-weight: 600;
    line-height: config('line-height-md', $typography);

    span {
      color: color('muted');
      font-size: config('font-size-sm', $typography);
      font-weight: 400;
    }
  }

  &__item-price {
    color: color('heading');
    font-variant-numeric: tabular-nums;
  }

  &__totals {
    border-block-start: config('border-width-base', $display) solid color('border');
    margin-inline: 0;
    padding-block-start: spacer('s');
    @include layout-stack('xxs');

    div {
      display: flex;
      justify-content: space-between;
    }

    dt {
      font-weight: 400;
    }

    dd {
      color: color('heading');
      font-variant-numeric: tabular-nums;
      margin: 0;
    }
  }

  &__total {
    border-block-start: config('border-width-base', $display) solid color('border');
    font-size: config('font-size-lg', $typography);
    margin-block-start: spacer('xs') !important;
    padding-block-start: spacer('xs');

    dt,
    dd {
      color: color('heading');
      font-weight: 700;
    }
  }

  &__details {
    margin-inline: 0;
    @include layout-stack('s');

    dt {
      color: color('muted');
      font-size: config('font-size-sm', $typography);
      font-weight: 400;
    }

    dd {
      color: color('heading');
      margin: 0;
    }

    address {
      font-style: normal;
    }
  }

  &__account {
    align-items: center;
    background-color: color-alpha('primary', 0.05);
    border-color: color-alpha('primary', 0.3);
    display: grid;
    gap: spacer('s') spacer('m');

    @include breakpoint('md') {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    }

    p {
      hyphens: manual;
    }
  }

  &__account-text {
    @include layout-stack('xxs');
  }

  &__account-fields {
    display: flex;
    flex-wrap: wrap;
    gap: spacer('xs');

    .form-control {
      flex: 1 1 12rem;
    }
  }

  &__actions {
    @include layout-cluster('s', center);
  }
}

@keyframes order-confirmation-pop {
  from {
    opacity: 0;
    scale: 0.5;
  }
}

<section class="order-confirmation" aria-labelledby="order-confirmation-title">
    <header class="order-confirmation__header">
        <span class="order-confirmation__icon" aria-hidden="true">
            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round" focusable="false"><path d="M20 6 9 17l-5-5"/></svg>
        </span>
        <p class="order-confirmation__eyebrow">Order #10482 confirmed</p>
        <h2 class="order-confirmation__title" id="order-confirmation-title" tabindex="-1">Thank you, Anna!</h2>
        <p class="order-confirmation__text">We’ve sent the receipt to <strong>anna@example.com</strong>. You’ll get another email when your order ships.</p>
    </header>
    <ol class="order-confirmation__next" role="list" aria-label="What happens next">
        <li class="order-confirmation__step order-confirmation__step--done"><span><span class="sr-only">Done: </span>Order placed</span></li>
        <li class="order-confirmation__step"><span>Packed within 24 hours</span></li>
        <li class="order-confirmation__step"><span>Delivered by <time datetime="2026-10-08">Thu, Oct 8</time></span></li>
    </ol>
    <div class="order-confirmation__grid">
        <section class="order-confirmation__card" aria-labelledby="order-confirmation-items">
            <h3 class="order-confirmation__card-title" id="order-confirmation-items">Order summary</h3>
            <ul class="order-confirmation__items" role="list">
                <li>
                    <img src="https://images.unsplash.com/photo-1577733966973-d680bffd2e80?auto=format&fit=crop&w=112&h=112&q=60" alt="" width="56" height="56" loading="lazy">
                    <span class="order-confirmation__item-name">Heritage Backpack <span>Forest green · 26 L · Qty 1</span></span>
                    <span class="order-confirmation__item-price">$189.00</span>
                </li>
                <li>
                    <img src="https://images.unsplash.com/photo-1602143407151-7111542de6e8?auto=format&fit=crop&w=112&h=112&q=60" alt="" width="56" height="56" loading="lazy">
                    <span class="order-confirmation__item-name">Steel Water Bottle <span>Qty 2</span></span>
                    <span class="order-confirmation__item-price">$48.00</span>
                </li>
            </ul>
            <dl class="order-confirmation__totals">
                <div><dt>Subtotal</dt><dd>$237.00</dd></div>
                <div><dt>Discount <code>AUTUMN10</code></dt><dd>−$23.70</dd></div>
                <div><dt>Shipping</dt><dd>Free</dd></div>
                <div><dt>Tax</dt><dd>$17.06</dd></div>
                <div class="order-confirmation__total"><dt>Total paid</dt><dd>$230.36</dd></div>
            </dl>
        </section>
        <section class="order-confirmation__card" aria-labelledby="order-confirmation-details">
            <h3 class="order-confirmation__card-title" id="order-confirmation-details">Delivery and payment</h3>
            <dl class="order-confirmation__details">
                <div>
                    <dt>Shipping address</dt>
                    <dd><address>Anna Smith<br>Andrássy út 12<br>1061 Budapest<br>Hungary</address></dd>
                </div>
                <div>
                    <dt>Shipping method</dt>
                    <dd>Standard (3–5 business days)</dd>
                </div>
                <div>
                    <dt>Payment</dt>
                    <dd>Visa ending in 4242</dd>
                </div>
            </dl>
        </section>
    </div>
    <form class="order-confirmation__account" action="#" method="post">
        <div class="order-confirmation__account-text">
            <h3 class="order-confirmation__card-title" id="order-confirmation-account">Save your details for next time</h3>
            <p>Create an account with <strong>anna@example.com</strong> to track this order and check out faster.</p>
        </div>
        <div class="order-confirmation__account-fields">
            <label class="sr-only" for="order-confirmation-password">Choose a password</label>
            <input class="form-control" id="order-confirmation-password" name="password" type="password" autocomplete="new-password" minlength="8" placeholder="Choose a password" required>
            <button class="btn btn--primary" type="submit">Create account</button>
        </div>
    </form>
    <div class="order-confirmation__actions">
        <a class="btn btn--primary btn--lg" href="#">Continue shopping</a>
        <a class="btn btn--outline-secondary btn--lg" href="#">View order</a>
    </div>
</section>

Order Confirmation

Anatomy

.order-confirmation__header: the success icon, the order number, the title and where the receipt went.
.order-confirmation__next: an ordered list of the next steps; the finished ones have --done.
.order-confirmation__grid: two __cards, the order summary (items and totals) and the delivery and payment details.
.order-confirmation__account: an optional form to create an account with the email address already known.
.order-confirmation__actions: "Continue shopping" and "View order".

Accessibility and Usability

The title has tabindex="-1": if the checkout ends with a client-side route change, move the focus to it, so screen reader users hear the confirmation first.
The totals and the details are description lists, the address is an address element, and the delivery date is a time element.
The finished step has hidden "Done:" text; the check mark is generated content.
Offer the account creation after the purchase, not before it: the guest checkout stays short, and the password field is the only thing to fill in (autocomplete="new-password", so password managers suggest a strong one).
Mask the payment details ("Visa ending in 4242"); never show the full card number.

Technical Details

No JavaScript. The success icon pops in once, only without prefers-reduced-motion: reduce.
Use the same order data as the confirmation email, and link "View order" to the Order Tracking.