Graphic promotion

This simple, versatile component helps us create a narrative in our product.

Backpack-SwiftUI/GraphicPromo

Cocoapods class reference view on Github

Top aligned

Day Night

Bottom aligned

Day Night

Top aligned - Sponsored

Day Night

Bottom aligned - Sponsored

Day Night

Usage

A component that allows for setting a kicker, headline and subheadline. Optionally, add the .sponsored ViewModifier to setup the sponsor logo and text. Set a .fallbackColor for when the image is still loading, this can be any Color and does not need to use BPKColor


                                                
                                                struct GraphicPromoExampleView: View {    
                                                    var body: some View {
                                                        ScrollView {
                                                            BPKGraphicPromo(
                                                                kicker: "Travel tips",
                                                                headline: "Three peaks challenge",
                                                                subheadline: "How to complete the climb in 3 days",
                                                                image: Image(decorative: "canadian_rockies_canada"),
                                                                overlay: .solid(.medium),
                                                                verticalAlignment: verticalAlignment
                                                            )
                                                            .onTapGesture {
                                                                print("Tap on graphic promo")
                                                            }
                                                            .fallbackColor(Color(.surfaceHighlightColor))
                                                            .sponsor(
                                                                title: "Sponsored",
                                                                logo: Image(decorative: "skyland"),
                                                                accessibilityLabel: "Sponsored by Skyland"
                                                            )
                                                        }
                                                    }
                                                }