Skip to content
Promo Banner preview
Rendered from the SwiftUI source on this page.

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