marketing/DSHeroSection
DSHeroSection
marketingFull-width landing page hero with an announcement badge, headline, subheadline, CTA buttons, and a social proof row.
iOS 17+macOS 14+
Purpose
First above-the-fold section of a marketing or app landing page.
Interactive Reference
Live showroom
Need the full visual surface?
Screenshots do not scale well across every component, state, and variant. For the real interactive reference, import the package and launch DSShowcaseRoot().
Best for exploring:
variants, states, categories, and real app examples in one place.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| badge | String? | nil | Small announcement badge above the headline. |
| headlinereq | String | — | Main heading. |
| subheadlinereq | String | — | Supporting copy. |
| primaryCTAreq | DSHeroCTA | — | Primary button (label + action). |
| secondaryCTA | DSHeroCTA? | nil | Secondary button. |
| socialProof | [DSUserAvatar]? | nil | Avatars + trust copy. |
Examples
App landing hero
Hero section for a productivity app.
swift
DSHeroSection(
badge: "Now in public beta",
headline: "Build faster with SwiftDS",
subheadline: "60+ production-ready SwiftUI components with a unified design token system.",
primaryCTA: DSHeroCTA(label: "Get started free", action: { navigate(.signup) }),
secondaryCTA: DSHeroCTA(label: "View documentation", action: { navigate(.docs) })
)