Team
A grid of people with a portrait, name and role.
Team
- Portrait: Ito Haruka, natural light, neutral background
Ito Haruka
Founder, design
- Portrait: Radu Enache, studio
Radu Enache
Engineering
- Portrait: Mia Lund, outdoors
Mia Lund
Strategy
<ul class="mn-people">
<li class="mn-person"><div class="mn-media mn-media-placeholder" style="--ratio:4/5" role="img" aria-label="Portrait: Ito Haruka, natural light, neutral background">Portrait: Ito Haruka, natural light, neutral background</div><h3 class="mn-person-name">Ito Haruka</h3><p class="mn-person-role">Founder, design</p></li>
<li class="mn-person"><div class="mn-media mn-media-placeholder" style="--ratio:4/5" role="img" aria-label="Portrait: Radu Enache, studio">Portrait: Radu Enache, studio</div><h3 class="mn-person-name">Radu Enache</h3><p class="mn-person-role">Engineering</p></li>
<li class="mn-person"><div class="mn-media mn-media-placeholder" style="--ratio:4/5" role="img" aria-label="Portrait: Mia Lund, outdoors">Portrait: Mia Lund, outdoors</div><h3 class="mn-person-name">Mia Lund</h3><p class="mn-person-role">Strategy</p></li>
</ul>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/team.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-people | The grid (a <ul>). |
| mn-person | One person: mn-media (portrait), mn-person-name, mn-person-role. |
Accessibility
- Portrait alt text can be the person’s name, or empty (alt="") when the name is right below it.
- Use a list so screen readers announce how many people there are.