Kode siap

import SwiftUI

struct LinenCheckoutStack: View {
    private let accent = Color.green

    var body: some View {
        HStack(spacing: 18) {
            VStack(alignment: .leading, spacing: 16) {
                Text("Linen Checkout Stack")
                    .font(.system(size: 30, weight: .bold, design: .rounded))

                ForEach(["Shipping details", "Payment method", "Delivery note"], id: \.self) { section in
                    RoundedRectangle(cornerRadius: 24, style: .continuous)
                        .fill(Color.white)
                        .frame(height: 92)
                        .overlay(alignment: .leading) {
                            VStack(alignment: .leading, spacing: 8) {
                                Text(section)
                                    .font(.headline)
                                Text("Bright fields and compact helper text keep the flow moving.")
                                    .font(.footnote)
                                    .foregroundStyle(.secondary)
                            }
                            .padding(18)
                        }
                }
            }

            VStack(alignment: .leading, spacing: 14) {
                Text("Order recap")
                    .font(.headline)
                RoundedRectangle(cornerRadius: 28, style: .continuous)
                    .fill(accent.opacity(0.16))
                    .frame(height: 220)
                    .overlay(alignment: .topLeading) {
                        VStack(alignment: .leading, spacing: 10) {
                            Text("$248.00")
                                .font(.system(size: 36, weight: .bold, design: .rounded))
                            Text("Estimated total")
                                .foregroundStyle(.secondary)
                        }
                        .padding(20)
                    }
            }
            .frame(width: 260)
            .padding(18)
            .background(Color.white, in: RoundedRectangle(cornerRadius: 30, style: .continuous))
        }
        .padding(24)
        .background(Color(.systemGroupedBackground))
    }
}

Linen Checkout Stack

A clean commerce checkout shell with step tracking and embedded order recap.

Harga

Bebas

Perdagangan

Pencipta

Membagikan

Bagikan di XLinkedInReddit
Linen Checkout Stack preview

Pembaruan terakhir

Disetujui

18 Mar 2026

Versi 1 · Linen Checkout Stack

Refined spacing and added alternate promo-code drawer.

Pencipta: Demo Creator

Lihat semuanya