import SwiftUI
struct TappableCard: View {
var body: some View {
HStack {
Image(systemName: "sparkles")
VStack(alignment: .leading) {
Text("New Template").font(.headline)
Text("Ready to customize").foregroundStyle(.secondary)
}
Spacer()
}
.padding()
.background(.background, in: RoundedRectangle(cornerRadius: 16))
.clipShape(RoundedRectangle(cornerRadius: 16))
.contentShape(RoundedRectangle(cornerRadius: 16))
.onTapGesture { openTemplate() }
}
}Implementation notes
clipShape affects rendering; it does not automatically redefine the hit area in every layout.
contentShape is especially useful for rows with spacers or transparent padding.
mask is powerful for reveals and text effects, but it can complicate readability.
Checklist
Verify the tappable area with real taps, not just visual inspection.
Use the same corner radius for background, clipping, and hit shape when they should match.
Avoid clipping shadows unless the design intentionally removes them.
Related reference
SwiftUI Overlay, Background, and zIndex
Layer views deliberately with background, overlay, and zIndex while keeping the base layout stable.
SwiftUI Image Resizing and SF Symbols
Resize bitmap images and SF Symbols predictably by separating intrinsic image behavior, content mode, and symbol styling.
SwiftUI disabled, redacted, and allowsHitTesting
Represent unavailable, loading, private, and pass-through states with the right interaction and visual modifiers.