Patterns Profile
Profile
User profile patterns with avatar displays, stats, activity feeds, and action buttons. Build profile pages and user cards for your applications.
Overview
Profile patterns display user information in various contexts, from compact cards to full-page layouts. These patterns combine avatars, user data, statistics, and interactive elements into cohesive displays.
Key features:
Avatar display with image or initials fallback
<hgroup> for name + role pairs with automatic muted subtitle styling<dl> / <dt> / <dd> for stat label/value pairs — semantic and accessibleActivity feeds showing recent actions
Action buttons for messaging, following, and editing
Responsive sidebar layout that automatically stacks on smaller screens
Profile Header
A centered profile header with a large avatar, user name, role, bio, stats row, and edit button. Ideal for the top of a user's profile page.
<layout-card>
<div class="profile-header" data-layout="stack" data-layout-gap="l" data-layout-align="center">
<!-- Avatar -->
<user-avatar data-size="2xl">
<span data-fallback>JD</span>
</user-avatar>
<!-- Name and Role -->
<hgroup class="tight">
<h1 class="profile-name">Jane Doe</h1>
<p>Senior Product Designer</p>
</hgroup>
<!-- Bio -->
<p class="profile-bio">
Passionate about creating intuitive user experiences...
</p>
<!-- Stats -->
<dl data-layout="cluster" data-layout-gap="xl" data-layout-justify="center">
<div class="stat-item">
<dd class="stat-value">142</dd>
<dt class="stat-label">Posts</dt>
</div>
<div class="stat-item">
<dd class="stat-value">12.4K</dd>
<dt class="stat-label">Followers</dt>
</div>
<div class="stat-item">
<dd class="stat-value">891</dd>
<dt class="stat-label">Following</dt>
</div>
</dl>
<!-- Edit Button -->
<button class="button secondary">
<icon-wc name="edit" size="sm"></icon-wc>
Edit Profile
</button>
</div>
</layout-card>
Profile Header Styles
.profile-header {
text-align: center;
padding: var(--size-2xl);
}
.profile-name {
margin: 0;
font-size: var(--font-size-2xl);
}
.profile-bio {
max-width: 50ch;
margin-inline: auto;
color: var(--color-text-muted);
}
.stat-item {
text-align: center;
}
.stat-value {
display: block;
font-size: var(--font-size-xl);
font-weight: var(--font-weight-bold);
}
.stat-label {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
dl, dd { margin: 0; }
Profile Card
A compact profile card suitable for user lists, team member displays, or search results. Features an avatar, name, email, description, and action buttons.
<layout-card data-padding="l">
<div data-layout="stack" data-layout-gap="m">
<div data-layout="cluster" data-layout-gap="m" data-layout-align="center">
<user-avatar data-size="lg">
<img src="user-photo.jpg" alt="Alex Thompson" />
</user-avatar>
<div data-layout="stack" data-layout-gap="2xs">
<h3 class="profile-card-name">Alex Thompson</h3>
<a href="mailto:alex@example.com" class="profile-card-email">alex@example.com</a>
</div>
</div>
<p class="profile-card-description">
Full-stack developer with 8 years of experience.
</p>
<div data-layout="cluster" data-layout-gap="s">
<button class="button small">
<icon-wc name="mail" size="sm"></icon-wc>
Message
</button>
<button class="button small secondary">
<icon-wc name="user-plus" size="sm"></icon-wc>
Follow
</button>
</div>
</div>
</layout-card>
Profile Card Styles
.profile-card-name {
margin: 0;
font-size: var(--font-size-lg);
}
.profile-card-email {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
.profile-card-description {
color: var(--color-text-muted);
font-size: var(--font-size-sm);
margin: 0;
}
Full Profile Page
A complete profile page layout with a sidebar containing user info and a main content area showing an activity feed. Uses layout-sidebar for responsive two-column layout.
<div data-layout="sidebar" data-layout-gap="xl" data-layout-sidebar-width="wide" data-layout-content-min="50">
<!-- Profile Sidebar -->
<layout-card data-padding="l">
<div class="profile-sidebar" data-layout="stack" data-layout-gap="l" data-layout-align="center">
<user-avatar data-size="2xl">
<img src="user-photo.jpg" alt="Sarah Chen" />
<span data-status="online"></span>
</user-avatar>
<hgroup class="tight">
<h1 class="profile-name">Sarah Chen</h1>
<p>Engineering Manager</p>
</hgroup>
<p class="profile-bio">Leading distributed teams...</p>
<dl data-layout="cluster" data-layout-gap="l" data-layout-justify="center">
<div class="stat-item">
<dd class="stat-value">89</dd>
<dt class="stat-label">Posts</dt>
</div>
<!-- More stats... -->
</dl>
<div data-layout="cluster" data-layout-gap="s">
<button class="button">Follow</button>
<button class="button secondary">Message</button>
</div>
</div>
</layout-card>
<!-- Activity Feed -->
<div data-layout="stack" data-layout-gap="l">
<header data-layout="cluster" data-layout-justify="between">
<h2>Recent Activity</h2>
<!-- Filter buttons -->
</header>
<div data-layout="stack" data-layout-gap="m">
<article class="activity-item" data-layout="stack" data-layout-gap="s">
<div data-layout="cluster" data-layout-gap="s" data-layout-align="center">
<icon-wc name="file-text" size="sm"></icon-wc>
<span class="activity-meta">Published a post</span>
</div>
<h3>Building Resilient Microservices</h3>
<p>Lessons learned from migrating...</p>
</article>
<!-- More activity items... -->
</div>
</div>
</div>
Activity Item Styles
.activity-item {
padding: var(--size-m);
border-radius: var(--radius-m);
background: var(--color-surface);
}
.activity-item:hover {
background: var(--color-surface-raised);
}
.activity-meta {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
}
.activity-title {
margin: 0;
font-size: var(--font-size-md);
}
.activity-description {
margin: 0;
color: var(--color-text-muted);
font-size: var(--font-size-sm);
}
Configuration
Profile patterns use these layout elements and attributes:
User Avatar
Attribute
Values
Description
data-sizexs sm md lg xl 2xlAvatar size. Use 2xl for profile headers, lg for cards.
data-shaperounded squareBorder radius style. Default is circle.
data-ringboolean
Add a decorative ring around the avatar.
Layout Sidebar
Attribute
Values
Description
data-layout-sidebar-widthnarrow (12rem) normal (15rem) wide (20rem)Width of the sidebar. Use wide for profile sidebars.
data-layout-content-min40 50 60Minimum content percentage before stacking. Use 50 for balanced layouts.
data-layout-gapxs s m l xlGap between sidebar and content.
Layout Stack
Attribute
Values
Description
data-layout-alignstart center endHorizontal alignment. Use center for profile headers.
data-layout-gap2xs xs s m l xlVertical spacing between items.
Usage Notes
Avatar fallbacks: Always provide initials via <span data-fallback> as a fallback when images fail to loadStatus indicators: Use <span data-status="online"> inside user-avatar to show user presenceHeading groups: Use <hgroup> for name + role pairs — the <p> inside automatically gets muted color stylingSemantic stats: Use <dl> / <dt> / <dd> for stat label/value pairs instead of generic <div> / <span> elementsResponsive layouts: The sidebar layout automatically stacks on smaller screens when data-layout-content-min is reachedSticky sidebar: data-layout-sticky works on <nav> and <aside> within page layouts, not on <layout-card>Accessibility: Ensure avatar images have meaningful alt text and buttons have clear labelsStats formatting: Use abbreviated numbers (e.g., 12.4K) for large counts to maintain visual balanceEmpty states: Provide helpful messages when activity feeds are empty