marketing/DSFeatureCard
DSFeatureCard
marketingMarketing card with an icon, headline, and body text. Designed for feature grids on landing pages.
iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+
Purpose
Communicate product benefits in a visually consistent grid.
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 |
|---|---|---|---|
| iconreq | String | — | SF Symbol representing the feature. |
| titlereq | String | — | Feature name. |
| descriptionreq | String | — | Feature description. |
| style | DSFeatureCard.Style | .outlined | .outlined, .filled, .gradient or .minimal. |
| accentColor | Color | DSColor.primary | Icon and accent tint. |
| badge | String? | nil | Optional badge (e.g. "New"). |
Examples
Features grid
Feature grid on a landing page.
swift
LazyVGrid(columns: [GridItem(.flexible()), GridItem(.flexible())], spacing: DSSpacing.md) {
DSFeatureCard(icon: "bolt.fill", title: "Fast", description: "Optimised for performance.", accentColor: DSColor.warning)
DSFeatureCard(icon: "lock.fill", title: "Secure", description: "End-to-end encrypted.", style: .filled, accentColor: DSColor.success)
DSFeatureCard(icon: "sparkles", title: "Smart", description: "AI-powered suggestions.", style: .gradient, badge: "New")
}