Profile Cards
Header, sidebar, mini and detailed profile cards.
Header Profile Card
Marcus Johnson
Product Designer · San Francisco
Designing delightful experiences for B2B SaaS. Currently building WebNexa UI.
248
Posts
12.4K
Followers
182
Following
<div class="uk-profile-header">
<div class="uk-profile-cover"></div>
<div class="uk-profile-header-body">
<img src="..." class="uk-profile-avatar">
<div class="uk-profile-name">Marcus Johnson</div>
<div class="uk-profile-role">Product Designer</div>
<p class="uk-profile-bio">Designing delightful experiences.</p>
<div class="uk-profile-actions">
<button class="uk-profile-btn primary">Follow</button>
<button class="uk-profile-btn">Message</button>
</div>
<div class="uk-profile-stats">
<div class="uk-profile-stat">
<div class="uk-profile-stat-value">248</div>
<div class="uk-profile-stat-label">Posts</div>
</div>
</div>
</div>
</div>
<style>
.uk-profile-header {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
overflow: hidden;
text-align: center;
}
.uk-profile-cover {
height: 100px;
background: linear-gradient(135deg, #1e3a8a 0%, #6366f1 60%, #a855f7 100%);
}
.uk-profile-header-body { padding: 0 1.5rem 1.5rem; }
.uk-profile-avatar {
width: 96px; height: 96px;
border-radius: 50%;
border: 4px solid #fff;
object-fit: cover;
margin-top: -48px;
}
.uk-profile-name {
font-size: 1.15rem;
font-weight: 800;
color: #0b1b2f;
margin-top: 0.75rem;
}
.uk-profile-role {
font-size: 0.82rem;
color: #94a3b8;
margin-top: 2px;
}
.uk-profile-bio {
font-size: 0.85rem;
color: #475569;
line-height: 1.6;
margin: 0.85rem 0 1.25rem;
max-width: 400px;
margin-left: auto;
margin-right: auto;
}
.uk-profile-actions {
display: flex;
gap: 0.5rem;
justify-content: center;
margin-bottom: 1.25rem;
}
.uk-profile-btn {
padding: 0.5rem 1.25rem;
border-radius: 0.5rem;
font-weight: 700;
font-size: 0.82rem;
border: 1.5px solid #e2e8f0;
background: #fff;
color: #475569;
cursor: pointer;
transition: all 0.15s;
}
.uk-profile-btn:hover { border-color: #1e3a8a; color: #1e3a8a; }
.uk-profile-btn.primary {
background: #1e3a8a;
color: #fff;
border-color: #1e3a8a;
}
.uk-profile-btn.primary:hover { background: #0f2a5c; }
.uk-profile-stats {
display: flex;
justify-content: center;
gap: 2rem;
padding-top: 1.25rem;
border-top: 1px solid #f1f5f9;
}
.uk-profile-stat { text-align: center; }
.uk-profile-stat-value {
font-size: 1.15rem;
font-weight: 800;
color: #0b1b2f;
}
.uk-profile-stat-label {
font-size: 0.7rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
}
</style>
Compact Profile Row
David Park
Engineering Lead
<div class="uk-profile-compact">
<img src="..." class="uk-profile-compact-avatar">
<div style="flex:1;">
<div class="uk-profile-name">David Park</div>
<div class="uk-profile-role">Engineering Lead</div>
</div>
<button class="uk-profile-icon-btn"><i class="fas fa-ellipsis-h"></i></button>
</div>
<style>
.uk-profile-compact {
display: flex;
align-items: center;
gap: 0.85rem;
padding: 0.85rem 1rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 0.85rem;
}
.uk-profile-compact-avatar {
width: 44px; height: 44px;
border-radius: 50%;
object-fit: cover;
}
.uk-profile-icon-btn {
width: 32px; height: 32px;
border-radius: 0.5rem;
background: transparent;
border: 0;
color: #94a3b8;
cursor: pointer;
font-size: 0.85rem;
transition: all 0.15s;
}
.uk-profile-icon-btn:hover { background: #f1f5f9; color: #475569; }
</style>
Team Member Card
Robert Chen
Head of Design
<div class="uk-profile-team">
<div class="uk-profile-team-avatar-wrap">
<img src="..." class="uk-profile-team-avatar">
<span class="uk-profile-team-online"></span>
</div>
<div class="uk-profile-name">Robert Chen</div>
<div class="uk-profile-role">Head of Design</div>
<div class="uk-profile-team-meta"><i class="fas fa-map-marker-alt"></i> Berlin, DE</div>
<div class="uk-profile-social">
<a href="#"><i class="fab fa-twitter"></i></a>
<a href="#"><i class="fab fa-linkedin-in"></i></a>
</div>
</div>
<style>
.uk-profile-team {
text-align: center;
padding: 1.5rem 1rem;
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
transition: all 0.2s;
}
.uk-profile-team:hover {
transform: translateY(-3px);
box-shadow: 0 12px 24px rgba(30, 58, 138, 0.08);
}
.uk-profile-team-avatar-wrap {
position: relative;
display: inline-block;
margin-bottom: 0.85rem;
}
.uk-profile-team-avatar {
width: 80px; height: 80px;
border-radius: 50%;
object-fit: cover;
}
.uk-profile-team-online {
position: absolute;
bottom: 4px; right: 4px;
width: 16px; height: 16px;
border-radius: 50%;
background: #22c55e;
border: 3px solid #fff;
}
.uk-profile-team-meta {
font-size: 0.75rem;
color: #94a3b8;
margin-top: 0.65rem;
}
.uk-profile-team-meta i { margin-right: 4px; }
.uk-profile-social {
display: flex;
justify-content: center;
gap: 0.4rem;
margin-top: 1rem;
}
.uk-profile-social a {
width: 30px; height: 30px;
border-radius: 50%;
background: #f1f5f9;
color: #475569;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 0.75rem;
text-decoration: none;
transition: all 0.15s;
}
.uk-profile-social a:hover { background: #1e3a8a; color: #fff; }
</style>
Profile with Stats Grid
Ali Khan
Founder · Northwind Labs
48
Projects
12K
Followers
4.9
Rating
<div class="uk-profile-stats-card">
<div class="uk-profile-stats-head">
<img src="...">
<div>
<div class="uk-profile-name">Ali Khan</div>
<div class="uk-profile-role">Founder · Northwind</div>
</div>
</div>
<div class="uk-profile-stats-grid">
<div class="uk-profile-stat-box">
<div class="uk-profile-stat-box-value">48</div>
<div class="uk-profile-stat-box-label">Projects</div>
</div>
</div>
</div>
<style>
.uk-profile-stats-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
padding: 1.25rem;
}
.uk-profile-stats-head {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.uk-profile-stats-head img {
width: 56px; height: 56px;
border-radius: 50%;
object-fit: cover;
}
.uk-profile-stats-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 0.5rem;
border-top: 1px solid #f1f5f9;
padding-top: 1rem;
}
.uk-profile-stat-box { text-align: center; }
.uk-profile-stat-box-value {
font-size: 1.25rem;
font-weight: 800;
color: #1e3a8a;
}
.uk-profile-stat-box-label {
font-size: 0.7rem;
color: #94a3b8;
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 600;
margin-top: 2px;
}
</style>
Sidebar Profile Widget
James Miller
Engineering Lead
<div class="uk-profile-sidebar">
<img src="..." class="uk-profile-sidebar-avatar">
<div class="uk-profile-name">James Miller</div>
<div class="uk-profile-role">Engineering Lead</div>
<div class="uk-profile-sidebar-progress">
<div class="uk-profile-sidebar-progress-head">
<span>Profile completion</span>
<span class="uk-profile-sidebar-progress-pct">78%</span>
</div>
<div class="uk-profile-sidebar-progress-bar">
<div style="width:78%"></div>
</div>
</div>
<div class="uk-profile-sidebar-menu">
<a href="#"><i class="fas fa-user"></i> Profile <i class="fas fa-chevron-right"></i></a>
</div>
</div>
<style>
.uk-profile-sidebar {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
padding: 1.5rem 1.25rem;
text-align: center;
}
.uk-profile-sidebar-avatar {
width: 72px; height: 72px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 0.75rem;
}
.uk-profile-sidebar-progress {
margin: 1.25rem 0;
text-align: left;
}
.uk-profile-sidebar-progress-head {
display: flex;
justify-content: space-between;
font-size: 0.72rem;
color: #64748b;
margin-bottom: 0.4rem;
}
.uk-profile-sidebar-progress-pct {
font-weight: 700;
color: #1e3a8a;
}
.uk-profile-sidebar-progress-bar {
height: 6px;
background: #e2e8f0;
border-radius: 999px;
overflow: hidden;
}
.uk-profile-sidebar-progress-bar > div {
height: 100%;
background: #1e3a8a;
border-radius: 999px;
}
.uk-profile-sidebar-menu {
display: flex;
flex-direction: column;
gap: 0.25rem;
border-top: 1px solid #f1f5f9;
padding-top: 1rem;
}
.uk-profile-sidebar-menu a {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.5rem 0.5rem;
font-size: 0.85rem;
color: #475569;
text-decoration: none;
border-radius: 0.5rem;
transition: all 0.15s;
}
.uk-profile-sidebar-menu a:hover { background: #f8fafc; color: #1e3a8a; }
.uk-profile-sidebar-menu a i:first-child { width: 16px; text-align: center; font-size: 0.8rem; }
.uk-profile-sidebar-menu a i:last-child { margin-left: auto; font-size: 0.65rem; color: #cbd5e1; }
</style>
Profile with Bio & Links
Sarah Chen
Product Designer · Vancouver, CA
Designer & maker. I craft interfaces that feel invisible. Currently building design tools for developers.
<div class="uk-profile-bio-card">
<div class="uk-profile-bio-head">
<img src="...">
<div>
<div class="uk-profile-name">Sarah Chen</div>
<div class="uk-profile-role">Product Designer</div>
</div>
</div>
<p class="uk-profile-bio-text">Designer & maker.</p>
<div class="uk-profile-meta">
<div><i class="fas fa-link"></i> sarahchen.design</div>
<div><i class="fas fa-calendar"></i> Joined March 2023</div>
</div>
<div class="uk-profile-tags">
<span class="uk-profile-tag">Design Systems</span>
</div>
</div>
<style>
.uk-profile-bio-card {
background: #fff;
border: 1px solid #e2e8f0;
border-radius: 1rem;
padding: 1.25rem;
}
.uk-profile-bio-head {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.uk-profile-bio-head img {
width: 64px; height: 64px;
border-radius: 50%;
object-fit: cover;
}
.uk-profile-bio-text {
font-size: 0.88rem;
color: #475569;
line-height: 1.6;
margin-bottom: 1rem;
}
.uk-profile-meta {
display: flex;
flex-wrap: wrap;
gap: 1rem;
font-size: 0.78rem;
color: #64748b;
margin-bottom: 1rem;
}
.uk-profile-meta i { margin-right: 4px; color: #94a3b8; }
.uk-profile-tags {
display: flex;
gap: 0.35rem;
flex-wrap: wrap;
}
.uk-profile-tag {
padding: 3px 10px;
background: #eef2f8;
color: #1e3a8a;
font-size: 0.72rem;
font-weight: 600;
border-radius: 999px;
}
</style>