UserProfileCard
DomainProfile card with cover banner, avatar, display name, username, bio, role and status badges, and an optional actions slot.
JD
Jane Doe
@janedoe
Full-stack engineer. Loves design systems and coffee.
Admin
Active
admin@acme.com
<%- include('modules/domain/common/user/UserProfileCard', {
name: user.name,
email: user.email,
role: user.role,
status: user.status,
username: user.username,
biography: user.biography,
src: user.profilePicture
}) %>
U
user@acme.com
User
Inactive
user@acme.com
<%- include('modules/domain/common/user/UserProfileCard', {
email: user.email,
role: user.role,
status: user.status
}) %><%
var _name = locals.name || locals.email || 'Unknown User';
var _email = locals.email || '';
var _username = locals.username || null;
var _bio = locals.biography || null;
var _role = locals.role || locals.userRole || 'USER';
var _status = locals.status || locals.userStatus || 'ACTIVE';
var _src = locals.src || locals.profilePicture || null;
var sizeMap = { xs: 'h-6 w-6 text-xs', sm: 'h-8 w-8 text-xs', md: 'h-10 w-10 text-sm', lg: 'h-12 w-12 text-base', xl: 'h-16 w-16 text-lg' };
var szClass = sizeMap['xl'];
var initials = _name.trim().split(/\s+/).map(function(w) { return w[0] || ''; }).slice(0, 2).join('').toUpperCase() || '?';
%>
<div class="bg-surface-raised border border-border rounded-xl overflow-hidden<%= locals.className ? ' ' + locals.className : '' %>">
<div class="h-20 bg-gradient-to-r from-primary-subtle to-secondary/20"></div>
<div class="px-5 pb-5">
<div class="flex items-end justify-between -mt-8 mb-3">
<div class="ring-4 ring-surface-raised rounded-full">
<% if (_src) { %>
<img src="<%= _src %>" alt="<%= _name %>" class="<%= szClass %> rounded-full object-cover border border-border">
<% } else { %>
<span aria-label="<%= _name %>" class="<%= szClass %> rounded-full bg-primary-subtle text-primary font-semibold flex items-center justify-center border border-primary-subtle select-none"><%= initials %></span>
<% } %>
</div>
<% if (locals.actionsHtml) { %>
<div class="flex items-center gap-2 pb-1"><%- locals.actionsHtml %></div>
<% } %>
</div>
<div class="space-y-1 mb-3">
<h3 class="text-lg font-bold text-text-primary leading-tight"><%= _name %></h3>
<% if (_username) { %><p class="text-sm text-text-secondary">@<%= _username %></p><% } %>
<% if (_bio) { %><p class="text-sm text-text-secondary leading-relaxed pt-1"><%= _bio %></p><% } %>
</div>
<div class="flex items-center gap-2 flex-wrap">
<%- include('../user/UserRoleBadge', { role: _role }) %>
<%- include('../user/UserStatusBadge', { status: _status }) %>
<span class="text-xs text-text-secondary truncate"><%= _email %></span>
</div>
</div>
</div>