Mã sẵn sàng

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.

Giá

Miễn phí

Thương mại

Người sáng tạo

Chia sẻ

Chia sẻ trên XLinkedInReddit
Linen Checkout Stack preview

Cập nhật lần cuối

Tán thành

18 thg 3, 2026

Phiên bản 1 · Linen Checkout Stack

Refined spacing and added alternate promo-code drawer.

Người sáng tạo: Demo Creator

Xem tất cả