SwiftUI Profile Card
A reusable profile card component to display user information in a clean, card-based design.
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.