screens/DSProfileHeroCard

DSProfileHeroCard

screens

since 0.1.0

Profile header card with avatar, name, bio, and stats.

iOS 17+macOS 14+watchOS 10+tvOS 17+visionOS 1+

Purpose

Use as the hero section of profile screens. Shows key user information at a glance.

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
userreq	DSUser	—	Name, username, role, initials, bio, location, stats, badges, verified/online flags.
onEdit	(() -> Void)?	nil	Shows an Edit button when set.
onMessage	(() -> Void)?	nil	Shows a Message button when set.

Examples

User profile

Stats live on DSUser.

swift

let user = DSUser(
    name: "Jane Doe",
    username: "jane",
    role: "iOS Engineer",
    email: "jane@example.com",
    initials: "JD",
    bio: "Building design systems.",
    location: "Lisbon",
    stats: [
        (label: "Posts", value: "127"),
        (label: "Followers", value: "2.4K"),
        (label: "Following", value: "384"),
    ],
    isVerified: true,
    isOnline: true
)

DSProfileHeroCard(user: user, onEdit: { showEditProfile = true })

Usage Guidelines

Use at top of profile screens
Limit stats to 3-4 key metrics
Ensure avatar is high quality
Keep bio concise (1-2 lines)

Related Components

Avatar