✨ Publier v1 is live — a polished docs platform built for the open web.
Skip to content

Team page

Team member grid at /team — powered by the TeamGrid component.

The team sub-page renders a responsive grid of team members at /team using the TeamGrid component from @publier/shell.

Enable / disable

publier.config.yaml
pages:
  team: true   # false to suppress /team

Starter implementation

The company-site template scaffolds src/pages/team.astro:

src/pages/team.astro
---
import { TeamGrid } from '@publier/shell/components';
import BaseLayout from '@publier/shell/layouts/base-layout.astro';
---


<BaseLayout title="Team — My Company" description="Meet the people behind the platform.">
  <main class="max-w-5xl mx-auto my-12 px-6">
    <h1>Team</h1>
    <p>We're a distributed team building the infrastructure we wish we'd had.</p>
    <TeamGrid
      columns={3}
      members={[
        {
          name: 'Priya Shah',
          role: 'CEO',
          bio: 'Previously led platform at Stripe. Cares deeply about reliability.',
        },
        {
          name: 'Marcus Chen',
          role: 'CTO',
          bio: 'Ex-Cloudflare. Distributed systems; networks; databases.',
        },
        {
          name: 'Ada Lovelace',
          role: 'Head of Engineering',
          bio: 'Joined from Netflix. Loves observability and simpler diagrams.',
        },
      ]}
    />
  </main>
</BaseLayout>

TeamGridMember supports optional avatarUrl and socials:

<TeamGrid
  columns={3}
  members={[
    {
      name: 'Priya Shah',
      role: 'CEO',
      bio: 'Previously led platform at Stripe.',
      avatarUrl: '/team/priya.jpg',
      socials: [
        { label: 'Twitter', href: 'https://twitter.com/priya' },
        { label: 'GitHub', href: 'https://github.com/priya' },
      ],
    },
  ]}
/>

See TeamGrid for the full prop reference.