Team Member Grid

About60: Team Member Grid

Team section with an eyebrow, heading, description, and a right-aligned CTA above a responsive grid of people cards, each a portrait image with a name and role beneath it.

Installation

Swap YOUR_EMAIL and YOUR_KEY for the email and license key on your account. Find your license key on your account page.

Radix flavor

npx shadcn add "https://ui.beste.co/r/about60?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://ui.beste.co/r-base/about60?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/about60.tsx, the badge7 component it uses for the eyebrow label, the button12 component it uses for the CTA, and its dependencies.

Quick start

The installed file exports about60Demo alongside the block: the exact props behind the preview above. Spread it to get a working section in one line.

import { About60, about60Demo } from "@/components/beste/block/about60";

export default function Page() {
  return <About60 {...about60Demo} />;
}

Then replace the demo with your own props. Written out, the same setup looks like this:

import { About60 } from "@/components/beste/block/about60";

export default function Page() {
  return (
    <About60
      badge={{ label: "The people" }}
      heading="Small team, <strong>senior hands.</strong>"
      description="No layers of account managers, no junior pass-throughs."
      button={{ label: "Meet the studio", href: "/team" }}
      people={[
        { name: "Mara Vance", role: "Founder & Creative Director", image: { src: "https://images.unsplash.com/photo-1648556873591-4b378146bd1c?w=900&fit=crop", alt: "Portrait of Mara Vance" } },
        { name: "Idris Okonkwo", role: "Principal Brand Designer", image: { src: "https://images.unsplash.com/photo-1637920448395-4173703a18c8?w=900&fit=crop", alt: "Portrait of Idris Okonkwo" } },
        { name: "Lena Sorensen", role: "Motion & Type Lead", image: { src: "https://images.unsplash.com/photo-1770896689034-770c5d284163?w=900&fit=crop", alt: "Portrait of Lena Sorensen" } },
      ]}
    />
  );
}

Props

type ActionButton = { label: string; href: string };
type About60Person = { name: string; role: string; image: { src: string; alt: string } };

Behavior notes

• The header row uses md:justify-between to put the badge/heading/description on the left and the button on the right from md up; on mobile everything stacks in document order.
• The grid is fixed at grid-cols-1 sm:grid-cols-2 lg:grid-cols-4, independent of people.length.
• There is no avatar-fallback handling: person.image.src is rendered directly in a plain <img> with no fallback for a missing or broken image, unlike shadcn Avatar-based team grids elsewhere in the registry.
• Each card shows only a portrait, name, and role; there are no bios or social links per person.
• The CTA uses Button12 with tone="outline", distinguishing it visually from the default-tone buttons used in most other about blocks in this set.