{
  "$schema": "https://mian.ro/schema/v2/registry.json",
  "schemaVersion": "2.0.0",
  "generatedAt": "2026-10-02T13:14:06.957Z",
  "id": "team",
  "name": "Team",
  "category": "Sections",
  "description": "A grid of people with a portrait, name and role.",
  "tags": [
    "team",
    "people",
    "staff",
    "about us",
    "founders",
    "speakers",
    "members",
    "profiles"
  ],
  "requiresJs": false,
  "license": "LicenseRef-MIAN-1.0",
  "composition": {
    "role": "people",
    "intents": [
      "team members",
      "our people",
      "staff",
      "speakers",
      "founders",
      "about us people"
    ],
    "prominence": "medium",
    "density": "medium",
    "worksAfter": [],
    "worksBefore": [],
    "alternatives": [
      "testimonial",
      "profile-header"
    ],
    "avoid": "Invented people. Use real names and roles, or leave it out."
  },
  "url": "https://mian.ro/components/team",
  "markdownUrl": "https://mian.ro/ai/components/team.md",
  "classes": [
    {
      "name": "mn-people",
      "description": "The grid (a <ul>)."
    },
    {
      "name": "mn-person",
      "description": "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": [
    {
      "title": "Team",
      "description": null,
      "html": "<ul class=\"mn-people\">\n  <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>\n  <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>\n  <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>\n</ul>"
    }
  ],
  "css": ".mn-people { display: grid; gap: 2.25rem 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); margin: 0; padding: 0; list-style: none; }\n.mn-person { display: grid; gap: .2rem; align-content: start; }\n.mn-person > * { margin: 0; }\n.mn-person > .mn-media { margin-bottom: .75rem; }\n.mn-person-name { font: 600 1rem/1.35 var(--mn-font-heading); color: var(--mn-fg); }\n.mn-person-role { color: var(--mn-muted); font-size: .875rem; }",
  "js": null,
  "install": {
    "css": "https://mian.ro/dist/mian.css",
    "js": null,
    "registryItem": "https://mian.ro/r/team.json"
  }
}