Welcome to Vanilla Breeze
This bell pulls live notifications from /go/notify/messages — the same contract documented at /docs/concepts/service-contracts/. Static articles like this one are the no-JS / no-backend fallback.
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 accessible- Activity 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.
profile-header.html
<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 CSS
.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.
profile-card.html
<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:[email protected]" class="profile-card-email">[email protected]</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 CSS
.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.
profile-full.html
<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 CSS
.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-size |
xs sm md lg xl 2xl |
Avatar size. Use 2xl for profile headers, lg for cards. |
data-shape |
rounded square |
Border radius style. Default is circle. |
data-ring |
boolean | Add a decorative ring around the avatar. |
Layout Sidebar
| Attribute | Values | Description |
|---|---|---|
data-layout-sidebar-width |
narrow (12rem) normal (15rem) wide (20rem) |
Width of the sidebar. Use wide for profile sidebars. |
data-layout-content-min |
40 50 60 |
Minimum content percentage before stacking. Use 50 for balanced layouts. |
data-layout-gap |
xs s m l xl |
Gap between sidebar and content. |
Layout Stack
| Attribute | Values | Description |
|---|---|---|
data-layout-align |
start center end |
Horizontal alignment. Use center for profile headers. |
data-layout-gap |
2xs xs s m l xl |
Vertical spacing between items. |
Usage Notes
- Avatar fallbacks: Always provide initials via
<span data-fallback>as a fallback when images fail to load - Status indicators: Use
<span data-status="online">insideuser-avatarto show user presence - Heading groups: Use
<hgroup>for name + role pairs — the<p>inside automatically gets muted color styling - Semantic stats: Use
<dl>/<dt>/<dd>for stat label/value pairs instead of generic<div>/<span>elements - Responsive layouts: The sidebar layout automatically stacks on smaller screens when
data-layout-content-minis reached - Sticky sidebar:
data-layout-stickyworks on<nav>and<aside>within page layouts, not on<layout-card> - Accessibility: Ensure avatar images have meaningful
alttext and buttons have clear labels - Stats formatting: Use abbreviated numbers (e.g., 12.4K) for large counts to maintain visual balance
- Empty states: Provide helpful messages when activity feeds are empty
Related
Dashboard
Admin dashboards with stats and data tables
User Avatar
Avatar element documentation and API
Layout Card
Card container element documentation
Icon
Icon element documentation and available icons