screens/DSProfileHeroCard

DSProfileHeroCard

screens
since 1.2.0

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

iOSmacOS

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

PropTypeDefaultDescription
userreqDSUser—User model with name, avatar, bio
stats[(label: String, value: String)][]Optional stats to display

Examples

User profile

Profile header with stats.

swift
DSProfileHeroCard(
    user: currentUser,
    stats: [
        (label: "Posts", value: "127"),
        (label: "Followers", value: "2.4K"),
        (label: "Following", value: "384"),
    ]
)

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