Profile header
The top of a profile page: cover, avatar, name, bio, details, stats and a follow button.
Profile
Ilinca Sava@ilinca
Writes about craft and software. Book on repair, Second Hands, out in spring.
412following18.2kfollowers1,204posts
<section class="mn-card mn-profile" style="max-width:36rem" aria-labelledby="pf-name">
<div class="mn-profile-cover" aria-hidden="true"></div>
<div class="mn-profile-body">
<div class="mn-profile-top"><span class="mn-avatar mn-avatar-xl mn-primary" aria-hidden="true">IS</span><div class="mn-row"><button class="mn-btn mn-btn-outline mn-btn-sm" type="button">Message</button><button class="mn-btn mn-btn-sm" type="button" aria-pressed="false">Follow</button></div></div>
<h3 class="mn-profile-name" id="pf-name"><strong>Ilinca Sava</strong><span>@ilinca</span></h3>
<p class="mn-profile-bio">Writes about craft and software. Book on repair, <em>Second Hands</em>, out in spring.</p>
<p class="mn-profile-meta"><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M12 21s-7-6.2-7-11a7 7 0 0 1 14 0c0 4.8-7 11-7 11Z"/><circle cx="12" cy="10" r="2.5"/></svg> Cluj-Napoca</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1"/><path d="M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/></svg> fieldnotes.example</span><span><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><rect x="3" y="5" width="18" height="16" rx="2"/><path d="M3 10h18M8 3v4M16 3v4"/></svg> Joined 2019</span></p>
<p class="mn-profile-stats"><span><strong>412</strong>following</span><span><strong>18.2k</strong>followers</span><span><strong>1,204</strong>posts</span></p>
</div>
</section>Installation
Everything ships in one stylesheet. There is nothing to import per component.
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">Prefer to own the files? /r/profile-header.json is a registry item with this component's CSS and example markup, ready to copy into your project with any tool that reads the open registry-item format.
Class reference
| Class / attribute | Description |
|---|---|
| mn-profile | The header. Add mn-card for a surface. |
| mn-profile-cover | Cover band (optionally with an image inside). |
| mn-profile-top | Avatar overlapping the cover, and actions. |
| mn-profile-name | Name and handle. |
| mn-profile-bio · mn-profile-meta · mn-profile-stats | Bio, details with icons, counts. |
Accessibility
- The name is the page’s heading (<h1> on a profile page).
- Follow is a toggle button with aria-pressed, or a clear “Follow” / “Following” label.