Código pronto

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.

Preço

Livre

Comércio

Criador

Compartilhar

Compartilhar no XLinkedInReddit
Linen Checkout Stack preview

Última atualização

Aprovado

18 de mar. de 2026

Versão 1 · Linen Checkout Stack

Refined spacing and added alternate promo-code drawer.

Criador: Demo Creator

Ver tudo