Team Sections

Team Sections 10 · Hiring call and team

A small team row with a black banner below inviting people to join, with a button. Sample content.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-5xl px-6 py-24'><div class='grid grid-cols-2 gap-6 text-center sm:grid-cols-4'><div><span class='mx-auto grid h-16 w-16 place-items-center rounded-full bg-black font-semibold text-white'>AM</span><p class='mt-3 text-sm font-medium text-black'>Alex</p></div><div><span class='mx-auto grid h-16 w-16 place-items-center rounded-full bg-neutral-700 font-semibold text-white'>SR</span><p class='mt-3 text-sm font-medium text-black'>Sam</p></div><div><span class='mx-auto grid h-16 w-16 place-items-center rounded-full bg-neutral-500 font-semibold text-white'>JL</span><p class='mt-3 text-sm font-medium text-black'>Jordan</p></div><div><span class='mx-auto grid h-16 w-16 place-items-center rounded-full border-2 border-dashed border-neutral-300 text-neutral-400'>?</span><p class='mt-3 text-sm font-medium text-neutral-400'>You?</p></div></div><div class='mt-14 flex flex-wrap items-center justify-between gap-4 rounded-3xl bg-black p-8'><div><h3 class='text-xl font-semibold text-white'>We are hiring</h3><p class='mt-1 text-sm text-neutral-400'>Help us build design tools that keep your code clean.</p></div><a href='#' class='rounded-lg bg-white px-5 py-2.5 text-sm font-semibold text-black'>See open roles</a></div></div></section>

Team Sections 09 · Grouped by department

People listed under department headings, each as a name and role line with hairlines. Sample people.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-3xl px-6 py-24'><h2 class='text-4xl font-semibold tracking-tight text-black'>Teams</h2><div class='mt-12 space-y-10'><div><h3 class='text-xs font-semibold uppercase tracking-widest text-neutral-400'>Product</h3><ul class='mt-3 divide-y divide-neutral-200 border-y border-neutral-200'><li class='flex justify-between py-4'><span class='font-medium text-black'>Alex Morgan</span><span class='text-sm text-neutral-500'>Founder</span></li><li class='flex justify-between py-4'><span class='font-medium text-black'>Sam Rivera</span><span class='text-sm text-neutral-500'>Design lead</span></li></ul></div><div><h3 class='text-xs font-semibold uppercase tracking-widest text-neutral-400'>Engineering</h3><ul class='mt-3 divide-y divide-neutral-200 border-y border-neutral-200'><li class='flex justify-between py-4'><span class='font-medium text-black'>Jordan Lee</span><span class='text-sm text-neutral-500'>Engineer</span></li><li class='flex justify-between py-4'><span class='font-medium text-black'>Riley Park</span><span class='text-sm text-neutral-500'>Engineer</span></li></ul></div><div><h3 class='text-xs font-semibold uppercase tracking-widest text-neutral-400'>Community</h3><ul class='mt-3 divide-y divide-neutral-200 border-y border-neutral-200'><li class='flex justify-between py-4'><span class='font-medium text-black'>Taylor Kim</span><span class='text-sm text-neutral-500'>Support</span></li></ul></div></div></div></section>

Team Sections 08 · Horizontal cards

Two-column cards with a square avatar on the left and name, role and a line on the right. Sample people.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-5xl px-6 py-24'><div class='grid gap-6 md:grid-cols-2'><div class='flex items-center gap-5 rounded-2xl border border-neutral-200 p-5'><span class='grid h-20 w-20 shrink-0 place-items-center rounded-xl bg-black text-xl font-semibold text-white'>AM</span><div><h3 class='font-semibold text-black'>Alex Morgan</h3><p class='text-sm text-neutral-500'>Founder</p><p class='mt-1 text-sm text-neutral-600'>Builds the editor.</p></div></div><div class='flex items-center gap-5 rounded-2xl border border-neutral-200 p-5'><span class='grid h-20 w-20 shrink-0 place-items-center rounded-xl bg-neutral-700 text-xl font-semibold text-white'>SR</span><div><h3 class='font-semibold text-black'>Sam Rivera</h3><p class='text-sm text-neutral-500'>Design</p><p class='mt-1 text-sm text-neutral-600'>Shapes how it looks.</p></div></div><div class='flex items-center gap-5 rounded-2xl border border-neutral-200 p-5'><span class='grid h-20 w-20 shrink-0 place-items-center rounded-xl bg-neutral-500 text-xl font-semibold text-white'>JL</span><div><h3 class='font-semibold text-black'>Jordan Lee</h3><p class='text-sm text-neutral-500'>Engineering</p><p class='mt-1 text-sm text-neutral-600'>Makes it reliable.</p></div></div><div class='flex items-center gap-5 rounded-2xl border border-neutral-200 p-5'><span class='grid h-20 w-20 shrink-0 place-items-center rounded-xl bg-neutral-300 text-xl font-semibold text-black'>TK</span><div><h3 class='font-semibold text-black'>Taylor Kim</h3><p class='text-sm text-neutral-500'>Support</p><p class='mt-1 text-sm text-neutral-600'>Answers your questions.</p></div></div></div></div></section>

Team Sections 07 · Cards with bio and links

Three bordered cards, each with an avatar, name, role, a bio and two links. Sample people.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-neutral-50'><div class='mx-auto max-w-6xl px-6 py-24'><div class='grid gap-6 md:grid-cols-3'><article class='rounded-2xl border border-neutral-200 bg-white p-6'><span class='grid h-14 w-14 place-items-center rounded-full bg-black font-semibold text-white'>AM</span><h3 class='mt-4 font-semibold text-black'>Alex Morgan</h3><p class='text-sm text-neutral-500'>Founder</p><p class='mt-3 text-sm text-neutral-600'>Writes the editor and keeps the code tidy.</p><p class='mt-4 flex gap-4 text-sm font-medium text-black'><a href='#' class='underline underline-offset-4'>GitHub</a><a href='#' class='underline underline-offset-4'>Site</a></p></article><article class='rounded-2xl border border-neutral-200 bg-white p-6'><span class='grid h-14 w-14 place-items-center rounded-full bg-neutral-700 font-semibold text-white'>SR</span><h3 class='mt-4 font-semibold text-black'>Sam Rivera</h3><p class='text-sm text-neutral-500'>Design</p><p class='mt-3 text-sm text-neutral-600'>Spacing, type and the small details.</p><p class='mt-4 flex gap-4 text-sm font-medium text-black'><a href='#' class='underline underline-offset-4'>Portfolio</a></p></article><article class='rounded-2xl border border-neutral-200 bg-white p-6'><span class='grid h-14 w-14 place-items-center rounded-full bg-neutral-500 font-semibold text-white'>JL</span><h3 class='mt-4 font-semibold text-black'>Jordan Lee</h3><p class='text-sm text-neutral-500'>Engineering</p><p class='mt-3 text-sm text-neutral-600'>Plugins, the MCP server and tests.</p><p class='mt-4 flex gap-4 text-sm font-medium text-black'><a href='#' class='underline underline-offset-4'>GitHub</a></p></article></div></div></section>

Team Sections 06 · Overlapping avatars

A compact strip with a row of overlapping round avatars and a line of text beside it. Sample people.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto flex max-w-3xl flex-wrap items-center justify-center gap-6 px-6 py-20 text-center sm:text-left'><div class='flex -space-x-3'><span class='grid h-12 w-12 place-items-center rounded-full border-2 border-white bg-black text-xs font-semibold text-white'>AM</span><span class='grid h-12 w-12 place-items-center rounded-full border-2 border-white bg-neutral-700 text-xs font-semibold text-white'>SR</span><span class='grid h-12 w-12 place-items-center rounded-full border-2 border-white bg-neutral-500 text-xs font-semibold text-white'>JL</span><span class='grid h-12 w-12 place-items-center rounded-full border-2 border-white bg-neutral-300 text-xs font-semibold text-black'>+6</span></div><p class='max-w-sm text-neutral-600'><span class='font-semibold text-black'>A small team</span> making design tools that respect your code.</p><a href='#' class='rounded-lg border border-black px-4 py-2 text-sm font-medium text-black hover:bg-black hover:text-white'>Meet everyone</a></div></section>

Team Sections 05 · Lead and grid

A large featured person on the left with a quote, and a two by two grid of others on the right. Sample people.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto grid max-w-6xl gap-12 px-6 py-24 md:grid-cols-2'><div><div class='aspect-[4/5] rounded-3xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1558730234-d8b2281b0d00?auto=format&fit=crop&w=800&q=75' alt='Black and white portrait of a man' loading='lazy' class='h-full w-full object-cover object-top grayscale'></div><h3 class='mt-5 text-xl font-semibold text-black'>Alex Morgan</h3><p class='text-sm text-neutral-500'>Founder</p><p class='mt-3 text-neutral-600'>“I wanted design and code to be the same thing.”</p></div><div class='grid grid-cols-2 gap-6 self-center'><div><div class='aspect-square rounded-2xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1590086782792-42dd2350140d?auto=format&fit=crop&w=500&q=75' alt='Portrait of a man in a blue shirt' loading='lazy' class='h-full w-full object-cover object-top grayscale'></div><h3 class='mt-3 font-semibold text-black'>Sam Rivera</h3><p class='text-sm text-neutral-500'>Design</p></div><div><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1781888681811-332968760c2a?auto=format&fit=crop&w=500&q=75' alt='Portrait of a woman in a white blazer' loading='lazy' class='h-full w-full object-cover object-top grayscale'></div><h3 class='mt-3 font-semibold text-black'>Jordan Lee</h3><p class='text-sm text-neutral-500'>Engineering</p></div><div><div class='aspect-square rounded-2xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1557053910-d9eadeed1c58?auto=format&fit=crop&w=500&q=75' alt='Portrait of a woman in a red top' loading='lazy' class='h-full w-full object-cover object-top grayscale'></div><h3 class='mt-3 font-semibold text-black'>Taylor Kim</h3><p class='text-sm text-neutral-500'>Support</p></div><div><div class='aspect-square rounded-2xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1714462396046-29272a3cb549?auto=format&fit=crop&w=500&q=75' alt='Portrait of a woman in dark clothes' loading='lazy' class='h-full w-full object-cover object-top grayscale'></div><h3 class='mt-3 font-semibold text-black'>Riley Park</h3><p class='text-sm text-neutral-500'>Community</p></div></div></div></section>

Team Sections 04 · List with bios

A vertical list where each person has an avatar, name, role, a short bio and social links. Sample people.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-3xl px-6 py-24'><h2 class='text-4xl font-semibold tracking-tight text-black'>Team</h2><ul class='mt-10 divide-y divide-neutral-200 border-y border-neutral-200'><li class='flex gap-5 py-8'><span class='grid h-16 w-16 shrink-0 place-items-center rounded-full bg-black font-semibold text-white'>AM</span><div><h3 class='font-semibold text-black'>Alex Morgan <span class='font-normal text-neutral-500'>· Founder</span></h3><p class='mt-2 text-sm text-neutral-600'>Builds the editor and writes most of the docs.</p><p class='mt-3 flex gap-4 text-sm font-medium text-black'><a href='#' class='underline underline-offset-4'>GitHub</a><a href='#' class='underline underline-offset-4'>X</a></p></div></li><li class='flex gap-5 py-8'><span class='grid h-16 w-16 shrink-0 place-items-center rounded-full bg-neutral-700 font-semibold text-white'>SR</span><div><h3 class='font-semibold text-black'>Sam Rivera <span class='font-normal text-neutral-500'>· Design</span></h3><p class='mt-2 text-sm text-neutral-600'>Cares about spacing, type and the small details.</p><p class='mt-3 flex gap-4 text-sm font-medium text-black'><a href='#' class='underline underline-offset-4'>Portfolio</a></p></div></li></ul></div></section>

Team Sections 03 · Dark team

Black section with four people shown as white initials circles and grey roles. Sample people.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-black'><div class='mx-auto max-w-6xl px-6 py-24'><h2 class='text-center text-4xl font-semibold tracking-tight text-white'>Who we are</h2><div class='mt-14 grid gap-8 sm:grid-cols-2 lg:grid-cols-4'><div class='rounded-2xl border border-neutral-800 p-6 text-center'><span class='mx-auto grid h-20 w-20 place-items-center rounded-full bg-white text-xl font-semibold text-black'>AM</span><h3 class='mt-4 font-semibold text-white'>Alex Morgan</h3><p class='text-sm text-neutral-400'>Founder</p></div><div class='rounded-2xl border border-neutral-800 p-6 text-center'><span class='mx-auto grid h-20 w-20 place-items-center rounded-full bg-neutral-300 text-xl font-semibold text-black'>SR</span><h3 class='mt-4 font-semibold text-white'>Sam Rivera</h3><p class='text-sm text-neutral-400'>Design</p></div><div class='rounded-2xl border border-neutral-800 p-6 text-center'><span class='mx-auto grid h-20 w-20 place-items-center rounded-full bg-neutral-500 text-xl font-semibold text-white'>JL</span><h3 class='mt-4 font-semibold text-white'>Jordan Lee</h3><p class='text-sm text-neutral-400'>Engineering</p></div><div class='rounded-2xl border border-neutral-800 p-6 text-center'><span class='mx-auto grid h-20 w-20 place-items-center rounded-full bg-neutral-700 text-xl font-semibold text-white'>TK</span><h3 class='mt-4 font-semibold text-white'>Taylor Kim</h3><p class='text-sm text-neutral-400'>Support</p></div></div></div></section>

Team Sections 02 · Portrait blocks

Three tall grey portrait placeholders with a name and role underneath. Sample people.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-6xl px-6 py-24'><div class='max-w-xl'><h2 class='text-4xl font-semibold tracking-tight text-black'>The people behind it</h2><p class='mt-4 text-lg text-neutral-600'>A small team that cares about clean code.</p></div><div class='mt-14 grid gap-8 sm:grid-cols-3'><div><div class='aspect-[3/4] rounded-3xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1558730234-d8b2281b0d00?auto=format&fit=crop&w=700&q=75' alt='Black and white portrait of a man' loading='lazy' class='h-full w-full object-cover object-top grayscale'></div><h3 class='mt-4 font-semibold text-black'>Alex Morgan</h3><p class='text-sm text-neutral-500'>Founder</p></div><div><div class='aspect-[3/4] rounded-3xl bg-neutral-200 overflow-hidden'><img src='https://images.unsplash.com/photo-1781888681811-332968760c2a?auto=format&fit=crop&w=700&q=75' alt='Portrait of a woman in a white blazer' loading='lazy' class='h-full w-full object-cover object-top grayscale'></div><h3 class='mt-4 font-semibold text-black'>Sam Rivera</h3><p class='text-sm text-neutral-500'>Design</p></div><div><div class='aspect-[3/4] rounded-3xl bg-neutral-100 overflow-hidden'><img src='https://images.unsplash.com/photo-1590086782792-42dd2350140d?auto=format&fit=crop&w=700&q=75' alt='Portrait of a man in a blue shirt' loading='lazy' class='h-full w-full object-cover object-top grayscale'></div><h3 class='mt-4 font-semibold text-black'>Jordan Lee</h3><p class='text-sm text-neutral-500'>Engineering</p></div></div></div></section>

Team Sections 01 · Four people grid

Four centered cards with a round initials avatar, a name and a role. Sample people.

<link rel='preconnect' href='https://fonts.googleapis.com'><link href='https://fonts.googleapis.com/css2?family=Geist:wght@400;500;600;700;800&family=Geist+Mono:wght@400;500&display=swap' rel='stylesheet'><script src='https://cdn.tailwindcss.com'></script><script>tailwind.config={theme:{extend:{fontFamily:{sans:['Geist','ui-sans-serif','system-ui','sans-serif'],mono:['Geist Mono','ui-monospace','monospace']}}}}</script><style>body{margin:0;background:#fff;color:#0a0a0a;font-family:Geist,ui-sans-serif,system-ui,sans-serif;-webkit-font-smoothing:antialiased}</style>
        <section class='bg-white'><div class='mx-auto max-w-6xl px-6 py-24'><h2 class='text-center text-4xl font-semibold tracking-tight text-black'>Meet the team</h2><div class='mt-14 grid gap-8 sm:grid-cols-2 lg:grid-cols-4'><div class='text-center'><span class='mx-auto grid h-24 w-24 place-items-center rounded-full bg-black text-2xl font-semibold text-white'>AM</span><h3 class='mt-4 font-semibold text-black'>Alex Morgan</h3><p class='text-sm text-neutral-500'>Founder</p></div><div class='text-center'><span class='mx-auto grid h-24 w-24 place-items-center rounded-full bg-neutral-800 text-2xl font-semibold text-white'>SR</span><h3 class='mt-4 font-semibold text-black'>Sam Rivera</h3><p class='text-sm text-neutral-500'>Design</p></div><div class='text-center'><span class='mx-auto grid h-24 w-24 place-items-center rounded-full bg-neutral-600 text-2xl font-semibold text-white'>JL</span><h3 class='mt-4 font-semibold text-black'>Jordan Lee</h3><p class='text-sm text-neutral-500'>Engineering</p></div><div class='text-center'><span class='mx-auto grid h-24 w-24 place-items-center rounded-full bg-neutral-400 text-2xl font-semibold text-white'>TK</span><h3 class='mt-4 font-semibold text-black'>Taylor Kim</h3><p class='text-sm text-neutral-500'>Support</p></div></div></div></section>