SwiftUI.cc
Patterns
PatternCardsBeginner

SwiftUI Profile Card

A reusable profile card component to display user information in a clean, card-based design.

Updated 2026-06
Basic Profile Card with Customizable Fields
import SwiftUI

struct ProfileCard: View {
    var name: String = "Alex Johnson"
    var role: String = "iOS Developer"
    var imageName: String = "person.circle"
    var backgroundColor: Color = .blue
    
    var body: some View {
        VStack(alignment: .leading, spacing: 12) {
            HStack {
                Image(systemName: imageName)
                    .resizable()
                    .aspectRatio(contentMode: .fit)
                    .frame(width: 60, height: 60)
                    .foregroundColor(.white)
                
                VStack(alignment: .leading, spacing: 4) {
                    Text(name)
                        .font(.title2)
                        .foregroundColor(.white)
                    Text(role)
                        .font(.subheadline)
                        .foregroundColor(.white.opacity(0.8))
                }
                .padding(.leading, 8)
            }
            
            Divider()
                .background(Color.white.opacity(0.3))
            
            HStack {
                Text("Followers: 1,234")
                    .foregroundColor(.white)
                Spacer()
                Text("Following: 230")
                    .foregroundColor(.white)
            }
        }
        .padding()
        .background(backgroundColor)
        .cornerRadius(12)
        .frame(maxWidth: .infinity)
    }
}

#Preview {
    ProfileCard()
        .previewLayout(.sizeThatFits)
}

How It Works

The ProfileCard component is designed to display a user profile in a card format, combining both visual and textual information. The layout is built using VStack and HStack to organize content in a structured way. The card includes a system image to represent the user, their name and role, and a simple follower count section.

The background color is customizable, making it easy to integrate into different UI themes. The use of Divider() and spacing helps separate sections visually, while the rounded corners give the card a modern, clean appearance. All elements are wrapped in a frame that takes the full available width, ensuring consistency across different screen sizes.

This design is ideal for dashboards, team member listings, or user profiles where a compact and informative view is needed. The use of #Preview macro allows for quick UI iteration in Xcode's canvas.

Customization

Parameter Where to change Example values
name ProfileCard struct "Jamie Smith", "User123"
role ProfileCard struct "Designer", "Team Lead"
imageName ProfileCard struct "person.fill", "square.stack"
backgroundColor ProfileCard struct .green, .indigo
font Text modifiers .title, .caption

Accessibility Notes

Ensure the image used is descriptive or include an accessibility label using .accessibilityLabel() for screen readers. Background color should maintain sufficient contrast with text for readability.