TeamGrid

About/team page grid with name, role, optional bio, avatar, and social links.

The TeamGrid component from @publier/shell renders an About or Team page as a responsive grid of members. Each member shows an avatar (or a letter placeholder), a name, a role, an optional bio, and optional social links.

Usage

import { TeamGrid } from '@publier/shell/components';

<TeamGrid
  columns={3}
  members={[
    {
      name: 'Ada Lovelace',
      role: 'Founder & CEO',
      bio: 'Previously at Analytical Machines.',
      avatarUrl: '/team/ada.jpg',
      socials: [
        { label: 'Twitter', href: 'https://twitter.com/ada' },
        { label: 'GitHub', href: 'https://github.com/ada' },
      ],
    },
    {
      name: 'Grace Hopper',
      role: 'VP Engineering',
      avatarUrl: '/team/grace.jpg',
    },
  ]}
/>

Props

`TeamGrid`

Prop	Type	Default	Description
`members`	`TeamGridMember[]`	required	Array of team members.
`columns`	`2 \| 3 \| 4`	`3`	Desktop column count.

`TeamGridMember`

Prop	Type	Default	Description
`name`	`string`	required	Member’s full name.
`role`	`string`	required	Role or title.
`bio`	`string`	`undefined`	Optional bio paragraph.
`avatarUrl`	`string`	`undefined`	Optional avatar URL. Rendered at 80×80 px with `loading="lazy"`.
`socials`	`{ label: string; href: string }[]`	`undefined`	Social links — rendered as a small link row.

Behaviour

When avatarUrl is omitted, a placeholder with the first letter of the name is shown instead.
Bio is only rendered when provided.
Social links open in a new tab with target="_blank" rel="noopener noreferrer".