# Team · MIAN

A grid of people with a portrait, name and role.

- Id: `team` · Category: Sections · Needs mian.js: no · License: MIAN License (free to use)
- Docs: https://mian.ro/components/team
- Use for: team members, our people, staff, speakers, founders, about us people.
- On a page: people · prominence medium · density medium.
- Alternatives: testimonial, profile-header.
- Avoid: Invented people. Use real names and roles, or leave it out.

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

## Examples

### Team

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

## Source

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