Team Portrait Grid

About68: Team Portrait Grid

Team section with a mono-style eyebrow badge above a hairline rule, a two-column header (heading left, description right on desktop), and a grid of portrait cards each showing a name and role underneath a full-bleed photo.

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/about68?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/about68.tsx, the badge23 component it uses for the eyebrow badge, and its dependencies.

Quick start

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

import { About68, about68Demo } from "@/components/beste/block/about68";

export default function AboutPage() {
  return <About68 {...about68Demo} />;
}

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

import { About68 } from "@/components/beste/block/about68";

export default function AboutPage() {
  return (
    <About68
      badge={{ label: "The team" }}
      heading="Built by people who have done the work themselves"
      description="A small team of operators and engineers who got tired of fighting their own tools."
      items={[
        {
          name: "Elena Rourke",
          role: "Co-founder, Product",
          avatar: {
            src: "https://images.unsplash.com/photo-1573496359142-b8d87734a5a2?w=600&h=750&fit=crop",
            alt: "Portrait of Elena Rourke",
          },
        },
        {
          name: "Marcus Vale",
          role: "Co-founder, Engineering",
          avatar: {
            src: "https://images.unsplash.com/photo-1507003211169-0a1dd7228f2d?w=600&h=750&fit=crop",
            alt: "Portrait of Marcus Vale",
          },
        },
      ]}
    />
  );
}

Props

type Badge = { label: string };
type MemberImage = { src: string; alt: string };
type Member = { name: string; role: string; avatar: MemberImage };

Behavior notes

• Unlike the other blocks in this set, heading is rendered as plain text (no dangerouslySetInnerHTML), so <strong> markup in it would show up literally instead of rendering.
• The header is a md:grid-cols-2 row: the heading sits left at font-light, the description sits in a max-w-md block pushed to the right edge (md:justify-end) rather than stacked below the heading.
• The badge is Badge23, a bordered, uppercase monospace pill, distinct from the parenthetical-style Badge7 used elsewhere in the set.
• The portrait grid is grid-cols-2 on mobile and md:grid-cols-4, with each photo in a fixed aspect-[4/5] box, so it is tuned for four-across desktop layouts; more members simply wrap to additional rows.
• The section explicitly sets bg-background on its wrapper, which the other About blocks in this set leave unset.