
Promo Banner
From syxUI — written for both platforms, not translated between them.
A marketing banner with a gradient, headline and CTA.
Cards · SwiftUI · iOS 17
- cards
- swiftui
The actual source
PromoBannerCard.swift
// Promo Banner · syxUI · https://syxui.dev/components/card-promo
// Free in any project. Keep this line and credit syxUI where a person can read it.
import SwiftUI
// Promo banner card
struct PromoBannerCard: View {
var body: some View {
HStack(spacing: 14) {
VStack(alignment: .leading, spacing: 6) {
Text("Summer Sale").font(.system(size: 19, weight: .bold)).foregroundStyle(.white)
Text("Up to 50% off everything").font(.system(size: 13)).foregroundStyle(.white.opacity(0.85))
Text("Shop now").font(.system(size: 13, weight: .semibold)).foregroundStyle(Color(red: 0.55, green: 0.40, blue: 0.90))
.padding(.horizontal, 14).padding(.vertical, 7).background(.white, in: Capsule()).padding(.top, 2)
}
Spacer()
Image(systemName: "gift.fill").font(.system(size: 40)).foregroundStyle(.white.opacity(0.9))
}
.padding(18).frame(width: 320)
.background(LinearGradient(colors: [Color(red: 0.55, green: 0.40, blue: 0.90), Color(red: 0.38, green: 0.25, blue: 0.75)], startPoint: .topLeading, endPoint: .bottomTrailing), in: RoundedRectangle(cornerRadius: 20, style: .continuous))
}
}
iOS 17 · No dependencies
Dependencies
- SwiftUI
- No external dependencies
Requires iOS 17


