{
  "name": "TeamGrid",
  "package": "@magicblocksai/ui",
  "file": "packages/ui/src/components/TeamGrid.tsx",
  "chapterTag": "09 Content Blocks",
  "chapter": "10-content-blocks.html",
  "sectionId": "team-grid",
  "elName": "Team member cards",
  "demoUrl": "https://brand.magicblocks.ai/components/10-content-blocks#team-grid",
  "hasLiveDemo": false,
  "description": "Team grid — about-page grid of humans. Wraps `.team-grid` from chapter 09.\nEach card uses `<TeamCard>` (photo, name, role, bio).",
  "useClient": false,
  "interactivity": "display",
  "namedExports": [
    {
      "name": "TeamGrid",
      "isPrincipal": true,
      "isType": false
    },
    {
      "name": "TeamCard",
      "isPrincipal": false,
      "isType": false
    },
    {
      "name": "TeamGridProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "TeamCardProps",
      "isPrincipal": false,
      "isType": true
    },
    {
      "name": "TeamMember",
      "isPrincipal": false,
      "isType": true
    }
  ],
  "importStatement": "import { TeamGrid } from \"@magicblocksai/ui\";",
  "props": [
    {
      "name": "items",
      "optional": true,
      "type": "TeamMember[]",
      "doc": "Team members. The grid is 3-up on desktop, 2-up on tablet, 1-up on phone. Defaults to the chapter-09 demo trio."
    }
  ],
  "classesUsed": [
    "team-bio",
    "team-card",
    "team-grid",
    "team-name",
    "team-photo",
    "team-role"
  ],
  "examples": {
    "react": "<TeamGrid\n  items={[\n    {\n      name: \"Priya Raman\",\n      role: \"Co-founder · CEO\",\n      bio: \"Built sales teams at two startups. Believes every lead deserves a real conversation.\",\n      photo: <img src=\"/team/priya.jpg\" alt=\"\" />,\n    },\n    {\n      name: \"Tomás Ruiz\",\n      role: \"Co-founder · CTO\",\n      bio: \"Trained conversational models for a decade. Now training them to listen.\",\n      photoStyle: { background: \"linear-gradient(135deg, #7DF4D0 0%, #37BC9B 100%)\" },\n    },\n  ]}\n/>",
    "html": "<div class=\"team-grid\">\n  <article class=\"team-card\">\n    <div class=\"team-photo\" style=\"background: linear-gradient(135deg, #FFD878 0%, #F9C33E 100%);\"></div>\n    <h3 class=\"team-name\">Priya Raman</h3>\n    <div class=\"team-role\">Co-founder · CEO</div>\n    <p class=\"team-bio\">Built sales teams at two startups. Believes every lead deserves a real conversation.</p>\n  </article>\n  <article class=\"team-card\">\n    <div class=\"team-photo\" style=\"background: linear-gradient(135deg, #7DF4D0 0%, #37BC9B 100%);\"></div>\n    <h3 class=\"team-name\">Tomás Ruiz</h3>\n    <div class=\"team-role\">Co-founder · CTO</div>\n    <p class=\"team-bio\">Trained conversational models for a decade. Now training them to listen.</p>\n  </article>\n  <article class=\"team-card\">\n    <div class=\"team-photo\" style=\"background: linear-gradient(135deg, #5BD9FC 0%, #1FAAE8 100%);\"></div>\n    <h3 class=\"team-name\">Jing Liu</h3>\n    <div class=\"team-role\">Head of Design</div>\n    <p class=\"team-bio\">Previously at Linear and Notion. Obsessed with warm, calm software.</p>\n  </article>\n</div>",
    "css": ".team-bio { font: 400 14px/1.55 var(--f-body); color: var(--fg-soft); margin: 0; }\n\n.team-card { padding: var(--s-4); background: var(--bg-paper); border: 1px solid var(--hair); border-radius: var(--r-md); }\n\n.team-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-5); width: 100%; max-width: min(1080px, 100%); margin: 0 auto; }\n\n.team-name { font: 700 18px/1.2 var(--f-display); color: var(--fg); margin: 0; }\n\n.team-photo { aspect-ratio: 1; width: 100%; border-radius: var(--r-sm); margin-bottom: var(--s-3); }\n\n.team-role { font: 500 11px/1 var(--f-mono); text-transform: uppercase; letter-spacing: 0.08em; color: var(--accent-text); margin: var(--s-1) 0 var(--s-2); }"
  }
}