Edit Team Section

Name

Also known as (comma separated)

Brief definition Grid of team member profiles.

Notes

Tier Core Useful Reference Deleted

Controls schema (JSON array) [ { "id": "heading", "type": "text", "label": "Heading", "default": "Meet the team" }, { "id": "columns", "type": "select", "label": "Columns", "default": "3", "options": [ "2", "3", "4" ] }, { "id": "accent", "type": "color", "label": "Avatar colour", "default": "#F5C2E0", "presets": [ "#F5C2E0", "#A8E6C1", "#BFD9F2", "#D9C8F0", "#E8A020", "#241430" ] }, { "id": "showRole", "type": "toggle", "label": "Show role", "default": true } ]

Templates (JSON object keyed by format) { "html": "<section class=\"team\">\n <h2 class=\"team__heading\">{{heading}}</h2>\n <div class=\"team__grid team__grid--{{columns}}\">\n <div class=\"team__card\"><span class=\"team__avatar\" style=\"background:{{accent}};\">MK</span><p class=\"team__name\">Maya Kessler</p>{{#if showRole}}<p class=\"team__role\">Co-founder</p>{{/if}}</div>\n <div class=\"team__card\"><span class=\"team__avatar\" style=\"background:{{accent}};\">DP</span><p class=\"team__name\">Diego Pardo</p>{{#if showRole}}<p class=\"team__role\">Head of Design</p>{{/if}}</div>\n <div class=\"team__card\"><span class=\"team__avatar\" style=\"background:{{accent}};\">RJ</span><p class=\"team__name\">Rhea Joshi</p>{{#if showRole}}<p class=\"team__role\">Engineering</p>{{/if}}</div>\n <div class=\"team__card\"><span class=\"team__avatar\" style=\"background:{{accent}};\">TL</span><p class=\"team__name\">Theo Lang</p>{{#if showRole}}<p class=\"team__role\">Customer Success</p>{{/if}}</div>\n </div>\n</section>\n<style>\n.team { font: 15px system-ui, sans-serif; color: #241430; padding: 24px; }\n.team__heading { margin: 0 0 18px; font-size: 22px; font-weight: 700; }\n.team__grid { display: grid; gap: 20px; }\n.team__grid--2 { grid-template-columns: repeat(2, 1fr); }\n.team__grid--3 { grid-template-columns: repeat(3, 1fr); }\n.team__grid--4 { grid-template-columns: repeat(4, 1fr); }\n.team__grid--2 .team__card:nth-child(n+3), .team__grid--3 .team__card:nth-child(n+4) { display: none; }\n.team__card { text-align: center; }\n.team__avatar { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: 50%; font-weight: 700; margin-bottom: 10px; color: #241430; }\n.team__name { margin: 0; font-weight: 700; font-size: 14px; }\n.team__role { margin: 2px 0 0; font-size: 12px; color: #241430aa; }\n</style>", "tailwind": "<section class=\"font-sans text-[#241430] p-6\">\n <h2 class=\"m-0 mb-4.5 text-2xl font-bold\">{{heading}}</h2>\n <div class=\"team-tw team-tw--{{columns}} grid gap-5\">\n <div class=\"team-tw__card text-center\"><span class=\"inline-flex items-center justify-center w-16 h-16 rounded-full font-bold mb-2.5 text-[#241430]\" style=\"background:{{accent}};\">MK</span><p class=\"m-0 font-bold text-sm\">Maya Kessler</p>{{#if showRole}}<p class=\"mt-0.5 mb-0 text-xs text-[#241430]/65\">Co-founder</p>{{/if}}</div>\n <div class=\"team-tw__card text-center\"><span class=\"inline-flex items-center justify-center w-16 h-16 rounded-full font-bold mb-2.5 text-[#241430]\" style=\"background:{{accent}};\">DP</span><p class=\"m-0 font-bold text-sm\">Diego Pardo</p>{{#if showRole}}<p class=\"mt-0.5 mb-0 text-xs text-[#241430]/65\">Head of Design</p>{{/if}}</div>\n <div class=\"team-tw__card text-center\"><span class=\"inline-flex items-center justify-center w-16 h-16 rounded-full font-bold mb-2.5 text-[#241430]\" style=\"background:{{accent}};\">RJ</span><p class=\"m-0 font-bold text-sm\">Rhea Joshi</p>{{#if showRole}}<p class=\"mt-0.5 mb-0 text-xs text-[#241430]/65\">Engineering</p>{{/if}}</div>\n <div class=\"team-tw__card text-center\"><span class=\"inline-flex items-center justify-center w-16 h-16 rounded-full font-bold mb-2.5 text-[#241430]\" style=\"background:{{accent}};\">TL</span><p class=\"m-0 font-bold text-sm\">Theo Lang</p>{{#if showRole}}<p class=\"mt-0.5 mb-0 text-xs text-[#241430]/65\">Customer Success</p>{{/if}}</div>\n </div>\n</section>\n<style>\n.team-tw--2 { grid-template-columns: repeat(2, 1fr); }\n.team-tw--3 { grid-template-columns: repeat(3, 1fr); }\n.team-tw--4 { grid-template-columns: repeat(4, 1fr); }\n.team-tw--2 .team-tw__card:nth-child(n+3), .team-tw--3 .team-tw__card:nth-child(n+4) { display: none; }\n</style>", "react": "export function TeamSection({\n heading = \"{{heading}}\",\n columns = \"{{columns}}\",\n accent = \"{{accent}}\",\n showRole = {{showRole}},\n}) {\n const members = [\n { initials: \"MK\", name: \"Maya Kessler\", role: \"Co-founder\" },\n { initials: \"DP\", name: \"Diego Pardo\", role: \"Head of Design\" },\n { initials: \"RJ\", name: \"Rhea Joshi\", role: \"Engineering\" },\n { initials: \"TL\", name: \"Theo Lang\", role: \"Customer Success\" },\n ].slice(0, Number(columns));\n return (\n <section style={{ font: \"15px system-ui, sans-serif\", color: \"#241430\", padding: 24 }}>\n <h2 style={{ margin: \"0 0 18px\", fontSize: 22, fontWeight: 700 }}>{heading}</h2>\n <div style={{ display: \"grid\", gap: 20, gridTemplateColumns: `repeat(${columns}, 1fr)` }}>\n {members.map((m) => (\n <div key={m.initials} style={{ textAlign: \"center\" }}>\n <span style={{ display: \"inline-flex\", alignItems: \"center\", justifyContent: \"center\", width: 64, height: 64,\n borderRadius: \"50%\", fontWeight: 700, marginBottom: 10, color: \"#241430\", background: accent }}>{m.initials}</span>\n <p style={{ margin: 0, fontWeight: 700, fontSize: 14 }}>{m.name}</p>\n {showRole && <p style={{ margin: \"2px 0 0\", fontSize: 12, color: \"#241430aa\" }}>{m.role}</p>}\n </div>\n ))}\n </div>\n </section>\n );\n}" }