# Profile header · MIAN

The top of a profile page: cover, avatar, name, bio, details, stats and a follow button.

- Id: `profile-header` · Category: Data display · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/profile-header
- Use for: profile page, user profile, account header, creator profile.

Use only the classes below and copy the examples' structure and ARIA; change the words. Check your markup at https://mian.ro/api/v1/validate.

## Install

```html
<link rel="stylesheet" href="https://mian.ro/dist/mian.css">
```

## Classes

- `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.

## Examples

### Profile

```html
<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>
```

## Source

Already inside mian.css; you do not need it to use the component. To vendor or customise: https://mian.ro/api/v1/components/profile-header/source