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í
Người sáng tạo
Chia sẻ

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.
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.






