Fertiger Code
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.
Preis
Kostenlos
Ersteller

Letztes Update
Freigegeben
18.03.2026
Fassung 1 · Linen Checkout Stack
Refined spacing and added alternate promo-code drawer.
Letztes Update
Freigegeben
18.03.2026
Fassung 1 · Linen Checkout Stack
Refined spacing and added alternate promo-code drawer.






