Responsive profile header blocks with avatar identity, cover areas, actions, social links, stats, and engagement controls.
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6" aria-labelledby="profile-header-13-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col overflow-hidden rounded border shadow-sm">
<div class="bg-color-primary-invert-default flex min-h-32 items-end justify-between gap-4 p-5 sm:min-h-40 sm:p-6">
<div class="grid flex-1 grid-cols-4 gap-2" aria-hidden="true">
<span class="bg-color-surface h-10 rounded"></span>
<span class="bg-color-primary-default h-16 rounded"></span>
<span class="bg-color-info-default h-12 rounded"></span>
<span class="bg-color-success-default h-20 rounded"></span>
</div>
<plus-chip status="primary" invert>Author</plus-chip>
</div>
<div class="flex flex-col gap-6 p-5 sm:p-6">
<header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center">
<plus-avatar size="xl" text="AS"></plus-avatar>
<div class="min-w-0">
<h2 id="profile-header-13-title" class="text-color-default flex flex-wrap items-center gap-2 text-2xl font-semibold sm:text-3xl">
Aylin Stone
<i class="fa-solid fa-shield text-color-success text-base" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-sm sm:text-base">Technical Writer</p>
<p class="text-color-placeholder text-sm">Dublin, Ireland</p>
</div>
</div>
<div class="flex flex-wrap gap-2">
<plus-button kind="filled" status="primary" size="md">
<i class="fa-regular fa-paper-plane" aria-hidden="true"></i>
Message
</plus-button>
<plus-button kind="outlined" status="default" size="md">
<i class="fa-regular fa-user" aria-hidden="true"></i>
Follow
</plus-button>
</div>
</header>
<p class="text-color-caption max-w-3xl text-sm sm:text-base">Writes implementation guides for product teams adopting token-led interface systems.</p>
<div class="grid gap-3 sm:grid-cols-3" aria-label="Aylin Stone profile statistics">
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">64</span>
<span class="text-color-caption text-xs">Posts</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">12K</span>
<span class="text-color-caption text-xs">Reads</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">8</span>
<span class="text-color-caption text-xs">Series</span>
</div>
</div>
<plus-divider></plus-divider>
<footer class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<nav class="flex items-center gap-3" aria-label="Aylin Stone social links">
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Aylin Stone on LinkedIn"><i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Aylin Stone on X"><i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Aylin Stone portfolio"><i class="fa-solid fa-link text-sm" aria-hidden="true"></i></a>
</nav>
<plus-button kind="text" status="default" size="md">View full profile <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></plus-button>
</footer>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6" aria-labelledby="profile-header-12-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col overflow-hidden rounded border shadow-sm">
<div class="bg-color-primary-invert-default flex min-h-32 items-end justify-between gap-4 p-5 sm:min-h-40 sm:p-6">
<div class="grid flex-1 grid-cols-4 gap-2" aria-hidden="true">
<span class="bg-color-surface h-10 rounded"></span>
<span class="bg-color-primary-default h-16 rounded"></span>
<span class="bg-color-info-default h-12 rounded"></span>
<span class="bg-color-success-default h-20 rounded"></span>
</div>
<plus-chip status="primary" invert>Shortlisted</plus-chip>
</div>
<div class="flex flex-col gap-6 p-5 sm:p-6">
<header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center">
<plus-avatar size="xl" text="JB"></plus-avatar>
<div class="min-w-0">
<h2 id="profile-header-12-title" class="text-color-default flex flex-wrap items-center gap-2 text-2xl font-semibold sm:text-3xl">
Jon Bell
<i class="fa-solid fa-shield text-color-success text-base" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-sm sm:text-base">Senior Frontend Candidate</p>
<p class="text-color-placeholder text-sm">Remote</p>
</div>
</div>
<div class="flex flex-wrap gap-2">
<plus-button kind="filled" status="primary" size="md">
<i class="fa-regular fa-paper-plane" aria-hidden="true"></i>
Message
</plus-button>
<plus-button kind="outlined" status="default" size="md">
<i class="fa-regular fa-user" aria-hidden="true"></i>
Follow
</plus-button>
</div>
</header>
<p class="text-color-caption max-w-3xl text-sm sm:text-base">Specializes in design systems, web components, accessibility reviews, and product dashboards.</p>
<div class="grid gap-3 sm:grid-cols-3" aria-label="Jon Bell profile statistics">
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">92</span>
<span class="text-color-caption text-xs">Score</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">5</span>
<span class="text-color-caption text-xs">Stages</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">2</span>
<span class="text-color-caption text-xs">Refs</span>
</div>
</div>
<plus-divider></plus-divider>
<footer class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<nav class="flex items-center gap-3" aria-label="Jon Bell social links">
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Jon Bell on LinkedIn"><i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Jon Bell on X"><i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Jon Bell portfolio"><i class="fa-solid fa-link text-sm" aria-hidden="true"></i></a>
</nav>
<plus-button kind="text" status="default" size="md">View full profile <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></plus-button>
</footer>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6" aria-labelledby="profile-header-17-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col overflow-hidden rounded border shadow-sm">
<div class="bg-color-primary-invert-default flex min-h-32 items-end justify-between gap-4 p-5 sm:min-h-40 sm:p-6">
<div class="grid flex-1 grid-cols-4 gap-2" aria-hidden="true">
<span class="bg-color-surface h-10 rounded"></span>
<span class="bg-color-primary-default h-16 rounded"></span>
<span class="bg-color-info-default h-12 rounded"></span>
<span class="bg-color-success-default h-20 rounded"></span>
</div>
<plus-chip status="primary" invert>Booking open</plus-chip>
</div>
<div class="flex flex-col gap-6 p-5 sm:p-6">
<header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center">
<plus-avatar size="xl" text="IK"></plus-avatar>
<div class="min-w-0">
<h2 id="profile-header-17-title" class="text-color-default flex flex-wrap items-center gap-2 text-2xl font-semibold sm:text-3xl">
Iris Kane
<i class="fa-solid fa-shield text-color-success text-base" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-sm sm:text-base">Wellness Coach</p>
<p class="text-color-placeholder text-sm">Austin, Texas</p>
</div>
</div>
<div class="flex flex-wrap gap-2">
<plus-button kind="filled" status="primary" size="md">
<i class="fa-regular fa-paper-plane" aria-hidden="true"></i>
Message
</plus-button>
<plus-button kind="outlined" status="default" size="md">
<i class="fa-regular fa-user" aria-hidden="true"></i>
Follow
</plus-button>
</div>
</header>
<p class="text-color-caption max-w-3xl text-sm sm:text-base">Runs team resilience sessions, async coaching plans, and leadership support circles.</p>
<div class="grid gap-3 sm:grid-cols-3" aria-label="Iris Kane profile statistics">
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">28</span>
<span class="text-color-caption text-xs">Clients</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">4.9</span>
<span class="text-color-caption text-xs">Rating</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">6</span>
<span class="text-color-caption text-xs">Slots</span>
</div>
</div>
<plus-divider></plus-divider>
<footer class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<nav class="flex items-center gap-3" aria-label="Iris Kane social links">
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Iris Kane on LinkedIn"><i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Iris Kane on X"><i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Iris Kane portfolio"><i class="fa-solid fa-link text-sm" aria-hidden="true"></i></a>
</nav>
<plus-button kind="text" status="default" size="md">View full profile <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></plus-button>
</footer>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6" aria-labelledby="profile-header-15-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col overflow-hidden rounded border shadow-sm">
<div class="bg-color-primary-invert-default flex min-h-32 items-end justify-between gap-4 p-5 sm:min-h-40 sm:p-6">
<div class="grid flex-1 grid-cols-4 gap-2" aria-hidden="true">
<span class="bg-color-surface h-10 rounded"></span>
<span class="bg-color-primary-default h-16 rounded"></span>
<span class="bg-color-info-default h-12 rounded"></span>
<span class="bg-color-success-default h-20 rounded"></span>
</div>
<plus-chip status="primary" invert>Instructor</plus-chip>
</div>
<div class="flex flex-col gap-6 p-5 sm:p-6">
<header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center">
<plus-avatar size="xl" text="SR"></plus-avatar>
<div class="min-w-0">
<h2 id="profile-header-15-title" class="text-color-default flex flex-wrap items-center gap-2 text-2xl font-semibold sm:text-3xl">
Sofia Reyes
<i class="fa-solid fa-shield text-color-success text-base" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-sm sm:text-base">Product Design Instructor</p>
<p class="text-color-placeholder text-sm">Madrid, Spain</p>
</div>
</div>
<div class="flex flex-wrap gap-2">
<plus-button kind="filled" status="primary" size="md">
<i class="fa-regular fa-paper-plane" aria-hidden="true"></i>
Message
</plus-button>
<plus-button kind="outlined" status="default" size="md">
<i class="fa-regular fa-user" aria-hidden="true"></i>
Follow
</plus-button>
</div>
</header>
<p class="text-color-caption max-w-3xl text-sm sm:text-base">Teaches practical product interface patterns for SaaS teams and independent designers.</p>
<div class="grid gap-3 sm:grid-cols-3" aria-label="Sofia Reyes profile statistics">
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">36</span>
<span class="text-color-caption text-xs">Lessons</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">4.8</span>
<span class="text-color-caption text-xs">Score</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">2.4K</span>
<span class="text-color-caption text-xs">Students</span>
</div>
</div>
<plus-divider></plus-divider>
<footer class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<nav class="flex items-center gap-3" aria-label="Sofia Reyes social links">
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Sofia Reyes on LinkedIn"><i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Sofia Reyes on X"><i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Sofia Reyes portfolio"><i class="fa-solid fa-link text-sm" aria-hidden="true"></i></a>
</nav>
<plus-button kind="text" status="default" size="md">View full profile <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></plus-button>
</footer>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6" aria-labelledby="profile-header-10-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col overflow-hidden rounded border shadow-sm">
<div class="bg-color-primary-invert-default flex min-h-32 items-end justify-between gap-4 p-5 sm:min-h-40 sm:p-6">
<div class="grid flex-1 grid-cols-4 gap-2" aria-hidden="true">
<span class="bg-color-surface h-10 rounded"></span>
<span class="bg-color-primary-default h-16 rounded"></span>
<span class="bg-color-info-default h-12 rounded"></span>
<span class="bg-color-success-default h-20 rounded"></span>
</div>
<plus-chip status="primary" invert>Creator</plus-chip>
</div>
<div class="flex flex-col gap-6 p-5 sm:p-6">
<header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center">
<plus-avatar size="xl" text="NE"></plus-avatar>
<div class="min-w-0">
<h2 id="profile-header-10-title" class="text-color-default flex flex-wrap items-center gap-2 text-2xl font-semibold sm:text-3xl">
Nora Ellis
<i class="fa-solid fa-shield text-color-success text-base" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-sm sm:text-base">Design Systems Creator</p>
<p class="text-color-placeholder text-sm">Berlin, Germany</p>
</div>
</div>
<div class="flex flex-wrap gap-2">
<plus-button kind="filled" status="primary" size="md">
<i class="fa-regular fa-paper-plane" aria-hidden="true"></i>
Message
</plus-button>
<plus-button kind="outlined" status="default" size="md">
<i class="fa-regular fa-user" aria-hidden="true"></i>
Follow
</plus-button>
</div>
</header>
<p class="text-color-caption max-w-3xl text-sm sm:text-base">Publishes reusable component kits and teaches practical design-system governance.</p>
<div class="grid gap-3 sm:grid-cols-3" aria-label="Nora Ellis profile statistics">
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">18K</span>
<span class="text-color-caption text-xs">Followers</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">126</span>
<span class="text-color-caption text-xs">Assets</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">4.9</span>
<span class="text-color-caption text-xs">Rating</span>
</div>
</div>
<plus-divider></plus-divider>
<footer class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<nav class="flex items-center gap-3" aria-label="Nora Ellis social links">
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Nora Ellis on LinkedIn"><i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Nora Ellis on X"><i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Nora Ellis portfolio"><i class="fa-solid fa-link text-sm" aria-hidden="true"></i></a>
</nav>
<plus-button kind="text" status="default" size="md">View full profile <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></plus-button>
</footer>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6" aria-labelledby="profile-header-16-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col overflow-hidden rounded border shadow-sm">
<div class="bg-color-primary-invert-default flex min-h-32 items-end justify-between gap-4 p-5 sm:min-h-40 sm:p-6">
<div class="grid flex-1 grid-cols-4 gap-2" aria-hidden="true">
<span class="bg-color-surface h-10 rounded"></span>
<span class="bg-color-primary-default h-16 rounded"></span>
<span class="bg-color-info-default h-12 rounded"></span>
<span class="bg-color-success-default h-20 rounded"></span>
</div>
<plus-chip status="primary" invert>Renewal due</plus-chip>
</div>
<div class="flex flex-col gap-6 p-5 sm:p-6">
<header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center">
<plus-avatar size="xl" text="AR"></plus-avatar>
<div class="min-w-0">
<h2 id="profile-header-16-title" class="text-color-default flex flex-wrap items-center gap-2 text-2xl font-semibold sm:text-3xl">
Acme Retail
<i class="fa-solid fa-shield text-color-success text-base" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-sm sm:text-base">Commerce Plus customer</p>
<p class="text-color-placeholder text-sm">New York, United States</p>
</div>
</div>
<div class="flex flex-wrap gap-2">
<plus-button kind="filled" status="primary" size="md">
<i class="fa-regular fa-paper-plane" aria-hidden="true"></i>
Message
</plus-button>
<plus-button kind="outlined" status="default" size="md">
<i class="fa-regular fa-user" aria-hidden="true"></i>
Follow
</plus-button>
</div>
</header>
<p class="text-color-caption max-w-3xl text-sm sm:text-base">Enterprise retail workspace for checkout experiments, storefront analytics, and support operations.</p>
<div class="grid gap-3 sm:grid-cols-3" aria-label="Acme Retail profile statistics">
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">$48K</span>
<span class="text-color-caption text-xs">ARR</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">14</span>
<span class="text-color-caption text-xs">Seats</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">82%</span>
<span class="text-color-caption text-xs">Usage</span>
</div>
</div>
<plus-divider></plus-divider>
<footer class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<nav class="flex items-center gap-3" aria-label="Acme Retail social links">
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Acme Retail on LinkedIn"><i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Acme Retail on X"><i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Acme Retail portfolio"><i class="fa-solid fa-link text-sm" aria-hidden="true"></i></a>
</nav>
<plus-button kind="text" status="default" size="md">View full profile <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></plus-button>
</footer>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6" aria-labelledby="profile-header-9-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col overflow-hidden rounded border shadow-sm">
<div class="bg-color-primary-invert-default flex min-h-32 items-end justify-between gap-4 p-5 sm:min-h-40 sm:p-6">
<div class="grid flex-1 grid-cols-4 gap-2" aria-hidden="true">
<span class="bg-color-surface h-10 rounded"></span>
<span class="bg-color-primary-default h-16 rounded"></span>
<span class="bg-color-info-default h-12 rounded"></span>
<span class="bg-color-success-default h-20 rounded"></span>
</div>
<plus-chip status="primary" invert>Available</plus-chip>
</div>
<div class="flex flex-col gap-6 p-5 sm:p-6">
<header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center">
<plus-avatar size="xl" text="MC"></plus-avatar>
<div class="min-w-0">
<h2 id="profile-header-9-title" class="text-color-default flex flex-wrap items-center gap-2 text-2xl font-semibold sm:text-3xl">
Maya Chen
<i class="fa-solid fa-shield text-color-success text-base" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-sm sm:text-base">Customer Success Lead</p>
<p class="text-color-placeholder text-sm">Toronto, Canada</p>
</div>
</div>
<div class="flex flex-wrap gap-2">
<plus-button kind="filled" status="primary" size="md">
<i class="fa-regular fa-paper-plane" aria-hidden="true"></i>
Message
</plus-button>
<plus-button kind="outlined" status="default" size="md">
<i class="fa-regular fa-user" aria-hidden="true"></i>
Follow
</plus-button>
</div>
</header>
<p class="text-color-caption max-w-3xl text-sm sm:text-base">Owns enterprise onboarding, product adoption reviews, and executive account health checks.</p>
<div class="grid gap-3 sm:grid-cols-3" aria-label="Maya Chen profile statistics">
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">42</span>
<span class="text-color-caption text-xs">Accounts</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">96%</span>
<span class="text-color-caption text-xs">Health</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">18h</span>
<span class="text-color-caption text-xs">Response</span>
</div>
</div>
<plus-divider></plus-divider>
<footer class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<nav class="flex items-center gap-3" aria-label="Maya Chen social links">
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Maya Chen on LinkedIn"><i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Maya Chen on X"><i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Maya Chen portfolio"><i class="fa-solid fa-link text-sm" aria-hidden="true"></i></a>
</nav>
<plus-button kind="text" status="default" size="md">View full profile <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></plus-button>
</footer>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6" aria-labelledby="profile-header-18-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col overflow-hidden rounded border shadow-sm">
<div class="bg-color-primary-invert-default flex min-h-32 items-end justify-between gap-4 p-5 sm:min-h-40 sm:p-6">
<div class="grid flex-1 grid-cols-4 gap-2" aria-hidden="true">
<span class="bg-color-surface h-10 rounded"></span>
<span class="bg-color-primary-default h-16 rounded"></span>
<span class="bg-color-info-default h-12 rounded"></span>
<span class="bg-color-success-default h-20 rounded"></span>
</div>
<plus-chip status="primary" invert>Maintainer</plus-chip>
</div>
<div class="flex flex-col gap-6 p-5 sm:p-6">
<header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center">
<plus-avatar size="xl" text="LG"></plus-avatar>
<div class="min-w-0">
<h2 id="profile-header-18-title" class="text-color-default flex flex-wrap items-center gap-2 text-2xl font-semibold sm:text-3xl">
Leo Grant
<i class="fa-solid fa-shield text-color-success text-base" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-sm sm:text-base">Open Source Maintainer</p>
<p class="text-color-placeholder text-sm">Portland, Oregon</p>
</div>
</div>
<div class="flex flex-wrap gap-2">
<plus-button kind="filled" status="primary" size="md">
<i class="fa-regular fa-paper-plane" aria-hidden="true"></i>
Message
</plus-button>
<plus-button kind="outlined" status="default" size="md">
<i class="fa-regular fa-user" aria-hidden="true"></i>
Follow
</plus-button>
</div>
</header>
<p class="text-color-caption max-w-3xl text-sm sm:text-base">Maintains component infrastructure, build tooling, and accessibility utilities for product teams.</p>
<div class="grid gap-3 sm:grid-cols-3" aria-label="Leo Grant profile statistics">
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">38</span>
<span class="text-color-caption text-xs">Repos</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">712</span>
<span class="text-color-caption text-xs">Stars</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">51</span>
<span class="text-color-caption text-xs">PRs</span>
</div>
</div>
<plus-divider></plus-divider>
<footer class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<nav class="flex items-center gap-3" aria-label="Leo Grant social links">
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Leo Grant on LinkedIn"><i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Leo Grant on X"><i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Leo Grant portfolio"><i class="fa-solid fa-link text-sm" aria-hidden="true"></i></a>
</nav>
<plus-button kind="text" status="default" size="md">View full profile <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></plus-button>
</footer>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6" aria-labelledby="profile-header-11-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col overflow-hidden rounded border shadow-sm">
<div class="bg-color-primary-invert-default flex min-h-32 items-end justify-between gap-4 p-5 sm:min-h-40 sm:p-6">
<div class="grid flex-1 grid-cols-4 gap-2" aria-hidden="true">
<span class="bg-color-surface h-10 rounded"></span>
<span class="bg-color-primary-default h-16 rounded"></span>
<span class="bg-color-info-default h-12 rounded"></span>
<span class="bg-color-success-default h-20 rounded"></span>
</div>
<plus-chip status="primary" invert>Verified org</plus-chip>
</div>
<div class="flex flex-col gap-6 p-5 sm:p-6">
<header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center">
<plus-avatar size="xl" text="NL"></plus-avatar>
<div class="min-w-0">
<h2 id="profile-header-11-title" class="text-color-default flex flex-wrap items-center gap-2 text-2xl font-semibold sm:text-3xl">
Northstar Labs
<i class="fa-solid fa-shield text-color-success text-base" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-sm sm:text-base">AI operations workspace</p>
<p class="text-color-placeholder text-sm">London, United Kingdom</p>
</div>
</div>
<div class="flex flex-wrap gap-2">
<plus-button kind="filled" status="primary" size="md">
<i class="fa-regular fa-paper-plane" aria-hidden="true"></i>
Message
</plus-button>
<plus-button kind="outlined" status="default" size="md">
<i class="fa-regular fa-user" aria-hidden="true"></i>
Follow
</plus-button>
</div>
</header>
<p class="text-color-caption max-w-3xl text-sm sm:text-base">Central workspace for model reviews, compliance workflows, and product analytics.</p>
<div class="grid gap-3 sm:grid-cols-3" aria-label="Northstar Labs profile statistics">
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">24</span>
<span class="text-color-caption text-xs">Members</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">9</span>
<span class="text-color-caption text-xs">Projects</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">3</span>
<span class="text-color-caption text-xs">Teams</span>
</div>
</div>
<plus-divider></plus-divider>
<footer class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<nav class="flex items-center gap-3" aria-label="Northstar Labs social links">
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Northstar Labs on LinkedIn"><i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Northstar Labs on X"><i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Northstar Labs portfolio"><i class="fa-solid fa-link text-sm" aria-hidden="true"></i></a>
</nav>
<plus-button kind="text" status="default" size="md">View full profile <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></plus-button>
</footer>
</div>
</article>
</section>
<section class="bg-color-modal flex w-full max-w-xs flex-col gap-20 overflow-hidden p-6 md:w-full md:max-w-none md:gap-24 md:p-20" aria-labelledby="profile-header-1-title">
<header class="flex w-full items-start justify-between gap-3 md:gap-6">
<img src="https://www.plusui.com/images/figma/images-blocks/jane-parker.svg" alt="Jane Parker" class="size-20 rounded-full object-cover md:size-48" />
<div class="flex shrink-0 items-center gap-1 md:gap-4" aria-label="Profile utilities">
<plus-button kind="outlined" status="default" size="sm" aria-label="Edit profile">
<i class="fa-regular fa-pen-to-square text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Profile settings">
<i class="fa-solid fa-gear text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Refresh profile">
<i class="fa-solid fa-rotate-right text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
</div>
</header>
<div class="flex max-w-4xl flex-col gap-4">
<h2 id="profile-header-1-title" class="text-color-default flex items-center gap-3 text-xl font-semibold md:gap-5 md:text-5xl">
Jane Parker
<i class="fa-solid fa-shield text-color-success text-2xl md:text-4xl" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-base md:text-3xl">Full Stack Developer - Web & Cloud Solutions</p>
<p class="text-color-placeholder text-base md:text-3xl">London UK</p>
</div>
</section>
<section class="bg-color-modal flex w-full max-w-xs flex-col gap-20 overflow-hidden p-6 md:w-full md:max-w-none md:gap-24 md:p-20" aria-labelledby="profile-header-2-title">
<header class="flex w-full items-start justify-between gap-3 md:gap-6">
<img src="https://www.plusui.com/images/figma/images-blocks/jane-parker.svg" alt="Jane Parker" class="size-20 rounded-full object-cover md:size-48" />
<div class="flex shrink-0 items-center gap-1 md:gap-4" aria-label="Profile utilities">
<plus-button kind="outlined" status="default" size="sm" aria-label="Edit profile">
<i class="fa-regular fa-pen-to-square text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Profile settings">
<i class="fa-solid fa-gear text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Refresh profile">
<i class="fa-solid fa-rotate-right text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
</div>
</header>
<div class="flex max-w-4xl flex-col gap-4">
<h2 id="profile-header-2-title" class="text-color-default flex items-center gap-3 text-xl font-semibold md:gap-5 md:text-5xl">
Jane Parker
<i class="fa-solid fa-shield text-color-success text-2xl md:text-4xl" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-base md:text-3xl">Full Stack Developer - Web & Cloud Solutions</p>
<p class="text-color-placeholder text-base md:text-3xl">London UK</p>
</div>
</section>
<section class="bg-color-modal flex w-full max-w-xs flex-col gap-20 overflow-hidden p-6 md:w-full md:max-w-none md:gap-24 md:p-20" aria-labelledby="profile-header-3-title">
<header class="flex w-full items-start justify-between gap-3 md:gap-6">
<img src="https://www.plusui.com/images/figma/images-blocks/jane-parker.svg" alt="Jane Parker" class="size-20 rounded-full object-cover md:size-48" />
<div class="flex shrink-0 items-center gap-1 md:gap-4" aria-label="Profile utilities">
<plus-button kind="outlined" status="default" size="sm" aria-label="Edit profile">
<i class="fa-regular fa-pen-to-square text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Profile settings">
<i class="fa-solid fa-gear text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Refresh profile">
<i class="fa-solid fa-rotate-right text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
</div>
</header>
<div class="flex max-w-4xl flex-col gap-4">
<h2 id="profile-header-3-title" class="text-color-default flex items-center gap-3 text-xl font-semibold md:gap-5 md:text-5xl">
Jane Parker
<i class="fa-solid fa-shield text-color-success text-2xl md:text-4xl" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-base md:text-3xl">Full Stack Developer - Web & Cloud Solutions</p>
<p class="text-color-placeholder text-base md:text-3xl">London UK</p>
</div>
</section>
<section class="bg-color-modal flex w-full max-w-xs flex-col gap-20 overflow-hidden p-6 md:w-full md:max-w-none md:gap-24 md:p-20" aria-labelledby="profile-header-4-title">
<header class="flex w-full items-start justify-between gap-3 md:gap-6">
<img src="https://www.plusui.com/images/figma/images-blocks/jane-parker.svg" alt="Jane Parker" class="size-20 rounded-full object-cover md:size-48" />
<div class="flex shrink-0 items-center gap-1 md:gap-4" aria-label="Profile utilities">
<plus-button kind="outlined" status="default" size="sm" aria-label="Edit profile">
<i class="fa-regular fa-pen-to-square text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Profile settings">
<i class="fa-solid fa-gear text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Refresh profile">
<i class="fa-solid fa-rotate-right text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
</div>
</header>
<div class="flex max-w-4xl flex-col gap-4">
<h2 id="profile-header-4-title" class="text-color-default flex items-center gap-3 text-xl font-semibold md:gap-5 md:text-5xl">
Jane Parker
<i class="fa-solid fa-shield text-color-success text-2xl md:text-4xl" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-base md:text-3xl">Full Stack Developer - Web & Cloud Solutions</p>
<p class="text-color-placeholder text-base md:text-3xl">London UK</p>
</div>
</section>
<section class="bg-color-modal flex w-full max-w-xs flex-col gap-20 overflow-hidden p-6 md:w-full md:max-w-none md:gap-24 md:p-20" aria-labelledby="profile-header-5-title">
<header class="flex w-full items-start justify-between gap-3 md:gap-6">
<img src="https://www.plusui.com/images/figma/images-blocks/jane-parker.svg" alt="Jane Parker" class="size-20 rounded-full object-cover md:size-48" />
<div class="flex shrink-0 items-center gap-1 md:gap-4" aria-label="Profile utilities">
<plus-button kind="outlined" status="default" size="sm" aria-label="Edit profile">
<i class="fa-regular fa-pen-to-square text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Profile settings">
<i class="fa-solid fa-gear text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Refresh profile">
<i class="fa-solid fa-rotate-right text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
</div>
</header>
<div class="flex max-w-4xl flex-col gap-4">
<h2 id="profile-header-5-title" class="text-color-default flex items-center gap-3 text-xl font-semibold md:gap-5 md:text-5xl">
Jane Parker
<i class="fa-solid fa-shield text-color-success text-2xl md:text-4xl" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-base md:text-3xl">Full Stack Developer - Web & Cloud Solutions</p>
<p class="text-color-placeholder text-base md:text-3xl">London UK</p>
</div>
</section>
<section class="bg-color-modal flex w-full max-w-xs flex-col gap-20 overflow-hidden p-6 md:w-full md:max-w-none md:gap-24 md:p-20" aria-labelledby="profile-header-6-title">
<header class="flex w-full items-start justify-between gap-3 md:gap-6">
<img src="https://www.plusui.com/images/figma/images-blocks/jane-parker.svg" alt="Jane Parker" class="size-20 rounded-full object-cover md:size-48" />
<div class="flex shrink-0 items-center gap-1 md:gap-4" aria-label="Profile utilities">
<plus-button kind="outlined" status="default" size="sm" aria-label="Edit profile">
<i class="fa-regular fa-pen-to-square text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Profile settings">
<i class="fa-solid fa-gear text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Refresh profile">
<i class="fa-solid fa-rotate-right text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
</div>
</header>
<div class="flex max-w-4xl flex-col gap-4">
<h2 id="profile-header-6-title" class="text-color-default flex items-center gap-3 text-xl font-semibold md:gap-5 md:text-5xl">
Jane Parker
<i class="fa-solid fa-shield text-color-success text-2xl md:text-4xl" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-base md:text-3xl">Full Stack Developer - Web & Cloud Solutions</p>
<p class="text-color-placeholder text-base md:text-3xl">London UK</p>
</div>
</section>
<section class="bg-color-modal flex w-full max-w-xs flex-col gap-20 overflow-hidden p-6 md:w-full md:max-w-none md:gap-24 md:p-20" aria-labelledby="profile-header-7-title">
<header class="flex w-full items-start justify-between gap-3 md:gap-6">
<img src="https://www.plusui.com/images/figma/images-blocks/jane-parker.svg" alt="Jane Parker" class="size-20 rounded-full object-cover md:size-48" />
<div class="flex shrink-0 items-center gap-1 md:gap-4" aria-label="Profile utilities">
<plus-button kind="outlined" status="default" size="sm" aria-label="Edit profile">
<i class="fa-regular fa-pen-to-square text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Profile settings">
<i class="fa-solid fa-gear text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Refresh profile">
<i class="fa-solid fa-rotate-right text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
</div>
</header>
<div class="flex max-w-4xl flex-col gap-4">
<h2 id="profile-header-7-title" class="text-color-default flex items-center gap-3 text-xl font-semibold md:gap-5 md:text-5xl">
Jane Parker
<i class="fa-solid fa-shield text-color-success text-2xl md:text-4xl" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-base md:text-3xl">Full Stack Developer - Web & Cloud Solutions</p>
<p class="text-color-placeholder text-base md:text-3xl">London UK</p>
</div>
</section>
<section class="bg-color-modal flex w-full max-w-xs flex-col gap-20 overflow-hidden p-6 md:w-full md:max-w-none md:gap-24 md:p-20" aria-labelledby="profile-header-8-title">
<header class="flex w-full items-start justify-between gap-3 md:gap-6">
<img src="https://www.plusui.com/images/figma/images-blocks/jane-parker.svg" alt="Jane Parker" class="size-20 rounded-full object-cover md:size-48" />
<div class="flex shrink-0 items-center gap-1 md:gap-4" aria-label="Profile utilities">
<plus-button kind="outlined" status="default" size="sm" aria-label="Edit profile">
<i class="fa-regular fa-pen-to-square text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Profile settings">
<i class="fa-solid fa-gear text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
<plus-button kind="outlined" status="default" size="sm" aria-label="Refresh profile">
<i class="fa-solid fa-rotate-right text-color-caption text-base md:text-2xl" aria-hidden="true"></i>
</plus-button>
</div>
</header>
<div class="flex max-w-4xl flex-col gap-4">
<h2 id="profile-header-8-title" class="text-color-default flex items-center gap-3 text-xl font-semibold md:gap-5 md:text-5xl">
Jane Parker
<i class="fa-solid fa-shield text-color-success text-2xl md:text-4xl" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-base md:text-3xl">Full Stack Developer - Web & Cloud Solutions</p>
<p class="text-color-placeholder text-base md:text-3xl">London UK</p>
</div>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6" aria-labelledby="profile-header-20-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col overflow-hidden rounded border shadow-sm">
<div class="bg-color-primary-invert-default flex min-h-32 items-end justify-between gap-4 p-5 sm:min-h-40 sm:p-6">
<div class="grid flex-1 grid-cols-4 gap-2" aria-hidden="true">
<span class="bg-color-surface h-10 rounded"></span>
<span class="bg-color-primary-default h-16 rounded"></span>
<span class="bg-color-info-default h-12 rounded"></span>
<span class="bg-color-success-default h-20 rounded"></span>
</div>
<plus-chip status="primary" invert>Verified</plus-chip>
</div>
<div class="flex flex-col gap-6 p-5 sm:p-6">
<header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center">
<plus-avatar size="xl" text="OH"></plus-avatar>
<div class="min-w-0">
<h2 id="profile-header-20-title" class="text-color-default flex flex-wrap items-center gap-2 text-2xl font-semibold sm:text-3xl">
Owen Hart
<i class="fa-solid fa-shield text-color-success text-base" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-sm sm:text-base">Security Reviewer</p>
<p class="text-color-placeholder text-sm">Manchester, UK</p>
</div>
</div>
<div class="flex flex-wrap gap-2">
<plus-button kind="filled" status="primary" size="md">
<i class="fa-regular fa-paper-plane" aria-hidden="true"></i>
Message
</plus-button>
<plus-button kind="outlined" status="default" size="md">
<i class="fa-regular fa-user" aria-hidden="true"></i>
Follow
</plus-button>
</div>
</header>
<p class="text-color-caption max-w-3xl text-sm sm:text-base">Reviews access policies, evidence packages, role changes, and high-risk release approvals.</p>
<div class="grid gap-3 sm:grid-cols-3" aria-label="Owen Hart profile statistics">
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">17</span>
<span class="text-color-caption text-xs">Audits</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">0</span>
<span class="text-color-caption text-xs">Overdue</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">A+</span>
<span class="text-color-caption text-xs">Risk</span>
</div>
</div>
<plus-divider></plus-divider>
<footer class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<nav class="flex items-center gap-3" aria-label="Owen Hart social links">
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Owen Hart on LinkedIn"><i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Owen Hart on X"><i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Owen Hart portfolio"><i class="fa-solid fa-link text-sm" aria-hidden="true"></i></a>
</nav>
<plus-button kind="text" status="default" size="md">View full profile <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></plus-button>
</footer>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6" aria-labelledby="profile-header-19-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col overflow-hidden rounded border shadow-sm">
<div class="bg-color-primary-invert-default flex min-h-32 items-end justify-between gap-4 p-5 sm:min-h-40 sm:p-6">
<div class="grid flex-1 grid-cols-4 gap-2" aria-hidden="true">
<span class="bg-color-surface h-10 rounded"></span>
<span class="bg-color-primary-default h-16 rounded"></span>
<span class="bg-color-info-default h-12 rounded"></span>
<span class="bg-color-success-default h-20 rounded"></span>
</div>
<plus-chip status="primary" invert>Owner</plus-chip>
</div>
<div class="flex flex-col gap-6 p-5 sm:p-6">
<header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center">
<plus-avatar size="xl" text="PN"></plus-avatar>
<div class="min-w-0">
<h2 id="profile-header-19-title" class="text-color-default flex flex-wrap items-center gap-2 text-2xl font-semibold sm:text-3xl">
Priya Nair
<i class="fa-solid fa-shield text-color-success text-base" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-sm sm:text-base">Team Administrator</p>
<p class="text-color-placeholder text-sm">Singapore</p>
</div>
</div>
<div class="flex flex-wrap gap-2">
<plus-button kind="filled" status="primary" size="md">
<i class="fa-regular fa-paper-plane" aria-hidden="true"></i>
Message
</plus-button>
<plus-button kind="outlined" status="default" size="md">
<i class="fa-regular fa-user" aria-hidden="true"></i>
Follow
</plus-button>
</div>
</header>
<p class="text-color-caption max-w-3xl text-sm sm:text-base">Manages billing contacts, member access, audit exports, and workspace security reviews.</p>
<div class="grid gap-3 sm:grid-cols-3" aria-label="Priya Nair profile statistics">
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">84</span>
<span class="text-color-caption text-xs">Members</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">11</span>
<span class="text-color-caption text-xs">Groups</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">4</span>
<span class="text-color-caption text-xs">Policies</span>
</div>
</div>
<plus-divider></plus-divider>
<footer class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<nav class="flex items-center gap-3" aria-label="Priya Nair social links">
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Priya Nair on LinkedIn"><i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Priya Nair on X"><i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Priya Nair portfolio"><i class="fa-solid fa-link text-sm" aria-hidden="true"></i></a>
</nav>
<plus-button kind="text" status="default" size="md">View full profile <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></plus-button>
</footer>
</div>
</article>
</section>
<section class="bg-color-surface flex w-full items-center justify-center p-4 sm:p-6" aria-labelledby="profile-header-14-title">
<article class="border-color-default bg-color-modal flex w-full max-w-4xl flex-col overflow-hidden rounded border shadow-sm">
<div class="bg-color-primary-invert-default flex min-h-32 items-end justify-between gap-4 p-5 sm:min-h-40 sm:p-6">
<div class="grid flex-1 grid-cols-4 gap-2" aria-hidden="true">
<span class="bg-color-surface h-10 rounded"></span>
<span class="bg-color-primary-default h-16 rounded"></span>
<span class="bg-color-info-default h-12 rounded"></span>
<span class="bg-color-success-default h-20 rounded"></span>
</div>
<plus-chip status="primary" invert>Admin</plus-chip>
</div>
<div class="flex flex-col gap-6 p-5 sm:p-6">
<header class="flex flex-col gap-4 sm:flex-row sm:items-start sm:justify-between">
<div class="flex min-w-0 flex-col gap-4 sm:flex-row sm:items-center">
<plus-avatar size="xl" text="DP"></plus-avatar>
<div class="min-w-0">
<h2 id="profile-header-14-title" class="text-color-default flex flex-wrap items-center gap-2 text-2xl font-semibold sm:text-3xl">
Devon Park
<i class="fa-solid fa-shield text-color-success text-base" aria-label="Verified profile"></i>
</h2>
<p class="text-color-caption text-sm sm:text-base">Product Operations</p>
<p class="text-color-placeholder text-sm">Seoul, South Korea</p>
</div>
</div>
<div class="flex flex-wrap gap-2">
<plus-button kind="filled" status="primary" size="md">
<i class="fa-regular fa-paper-plane" aria-hidden="true"></i>
Message
</plus-button>
<plus-button kind="outlined" status="default" size="md">
<i class="fa-regular fa-user" aria-hidden="true"></i>
Follow
</plus-button>
</div>
</header>
<p class="text-color-caption max-w-3xl text-sm sm:text-base">Coordinates release readiness, account permissions, roadmap intake, and stakeholder updates.</p>
<div class="grid gap-3 sm:grid-cols-3" aria-label="Devon Park profile statistics">
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">7</span>
<span class="text-color-caption text-xs">Boards</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">31</span>
<span class="text-color-caption text-xs">Tasks</span>
</div>
<div class="border-color-default bg-color-surface flex flex-col gap-1 rounded border p-3">
<span class="text-color-default text-xl font-semibold">99%</span>
<span class="text-color-caption text-xs">Uptime</span>
</div>
</div>
<plus-divider></plus-divider>
<footer class="flex flex-col gap-3 sm:flex-row sm:items-center sm:justify-between">
<nav class="flex items-center gap-3" aria-label="Devon Park social links">
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Devon Park on LinkedIn"><i class="fa-brands fa-linkedin text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Devon Park on X"><i class="fa-brands fa-x-twitter text-sm" aria-hidden="true"></i></a>
<a href="#" class="text-color-caption hover:text-color-default bg-color-default-default flex size-9 items-center justify-center rounded" aria-label="Devon Park portfolio"><i class="fa-solid fa-link text-sm" aria-hidden="true"></i></a>
</nav>
<plus-button kind="text" status="default" size="md">View full profile <i class="fa-solid fa-arrow-right" aria-hidden="true"></i></plus-button>
</footer>
</div>
</article>
</section>
Profile Header blocks are designed for user profile pages, community dashboards, creator pages, and account overview surfaces. Each variation keeps the profile identity visible first, then layers in the actions, cover area, social links, statistics, or engagement controls required by the layout.
Use real profile data when available:
name: Display name shown as the primary heading.title: Role, profession, or short account descriptor.location: Optional location metadata.avatarText: Initials or accessible fallback for the avatar.verified: Boolean verification marker rendered beside the name.actions: Utility, connection, management, or engagement controls.socialLinks: Optional social destinations with accessible labels.stats: Optional label/value pairs for detailed headers.What is a profile header UI component? A profile header is the identity area of a profile page. It usually combines an avatar, name, supporting profile metadata, and key actions.
When should I use a cover image profile header? Use cover-led variations when the profile page needs stronger visual identity, such as creator pages, community profiles, or customer-facing account pages.
Can these blocks work without external images? Yes. The examples use Plus UI avatar fallbacks and token-styled cover panels so they remain durable static HTML snippets.
How should social actions be labelled?
Use visible labels for engagement controls and aria-label values for icon-only social links or utility buttons.
Join to our popular weekly newsletter Plus UI, packed with updates, tips on UX and get the latest news in your inbox.
© Plus UI 2026
Plus UI offers an integrated Design System and UI Library, featuring a versatile suite of components to elevate your development projects. We streamline the web app development process with fully customizable pre-built components, themes, and powerful integrations.
Our components are built on a centralized token architecture, ensuring consistency and efficiency across your design system and UI library. The UI Library's framework-agnostic technology allows seamless use of components across different frameworks. Optimized for speed, it offers fast loading times, high performance, and quick integration, making it the fastest component library for web applications. The token architecture ensures theming consistency, covering essential design aspects like Color, Typography, Icons, Borders, Spacing, Opacity, Shadows & Effects, and Breakpoints. Integrations with Tailwind CSS and Font Awesome enhance functionality. Ready-to-use themes include light and dark modes, with full customization to apply your branding. Plus UI is also compliant with WCAG 2.1 standards for accessible web design.
We have meticulously designed and developed a collection of 26 feature-rich core components, with over 2000 variants and more than 2000 free icons in our Freemium Plan. For more advanced needs, our Pro Plan provides access to professionally designed and developed components, blocks, and templates. Our core components include: Accordion, Alert, Avatar, Badge, Button, Button Group, Breadcrumb, Checkbox, Chip, Divider, Drawer, Dropdown, Input, Link, Modal, Progress, Popconfirm, Popover, Radio, Rating, Select, Tabs, Textarea, Toast, Toggle, and Tooltip. Advanced components feature Charts, Date & Time Pickers, Data Grids, and Tree Views. The Plus UI component library offers a robust and flexible solution for building user interfaces, with support for React, Vue.js, Angular, Svelte, Next.js, and other frameworks.
Plus UI sets itself apart from other UI libraries and design systems. While systems like IBM's Carbon Design System excel in scalability for enterprise use, Plus UI integrates a centralized token system that unifies the design system and UI library, enhancing consistency and efficiency.
Unlike the Atlassian Design System, which focuses on simplicity for enterprise solutions, Plus UI provides a rich set of customizable and accessible components powered by Tailwind CSS and Font Awesome, ensuring a lightweight and flexible design framework.
The Figma Design System is known for its powerful collaboration features. Plus UI complements these by offering a meticulously organized suite of components compatible with Figma, allowing designers to leverage advanced features alongside our extensive library.
For Salesforce developers, the Lightning Design System offers robust tools. Plus UI provides similar robustness but extends its versatility by supporting multiple frameworks like React, Angular, Vue, and Svelte, making it adaptable to a wider range of applications.
The Airbnb Design System emphasizes user-centric principles. Plus UI builds on this with a centralized token system that enhances design coherence, ensuring all components adhere to consistent standards.
Apple’s Design System is celebrated for its sleek aesthetics and high performance. Plus UI matches this standard while providing a vast array of fully customizable and accessible components, including support for dark themes.
Atomic Design focuses on breaking down UIs into smaller, reusable components. Plus UI extends this approach with over 2000 variants and a rich set of properties and tokens, enabling efficient development of complex interfaces.
The IBM Design System is known for its comprehensive guidelines and accessibility. Plus UI offers user-friendly, accessible interfaces with detailed documentation and a component library that boosts productivity and design consistency.
The Salesforce Lightning Design System is optimized for Salesforce applications. Plus UI offers broader integrations, making it suitable for various frameworks beyond Salesforce, providing greater versatility.
Google's Material Design is a cohesive framework for responsive, mobile-first interfaces. Plus UI supports these principles but distinguishes itself with a lightweight package and a powerful combination of Tailwind CSS and Font Awesome for enhanced customization.
The Google Design System pioneered modern design principles. Plus UI builds on these by offering a comprehensive and highly adaptable system that caters to a broader range of needs.
The Uber Design System focuses on accessibility for a global user base. Plus UI shares this focus and expands on it by providing fully customizable components tailored to diverse user needs.
Microsoft's Fluent Design System emphasizes light, depth, and motion. Plus UI incorporates these principles while providing an extensive library of easy-to-use components for a seamless development process.
Finally, the Ant Design System is popular for its robust components in enterprise environments. Plus UI offers similar robustness but stands out with its centralized token system, extensive component library, and multi-framework compatibility, making it ideal for a wide range of applications.
In essence, Plus UI combines the strengths of these renowned design systems while offering unique features like a centralized token system, extensive customization, and framework-agnostic components, setting it apart as a versatile and powerful solution.