Team Photo & List shadcn/tailwind block

About this block

Team Photo & ListPRO

Wide team photo, member list with avatars, team stats grid, and a culture quote. A rich team showcase layout.

About20: Team Photo & List

A wide team photo sits above a two-track layout: a divided list of team members (avatar, name, role) on the left, and a compact stats grid plus a culture quote card on the right. Built as a richer team showcase than a plain avatar grid, combining a photo, a roster, and social proof in one section.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

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

bash

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

Base UI flavor

bash

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

This installs the block to components/beste/block/about20.tsx and the badge, button, and avatar shadcn/ui primitives it depends on.

Quick start

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

tsx

import { About20, about20Demo } from "@/components/beste/block/about20";

export default function Page() {
  return <About20 {...about20Demo} />;
}

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

tsx

import { About20 } from "@/components/beste/block/about20";

export default function Page() {
  return (
    <About20
      badge={{ label: "Our Team", variant: "secondary" }}
      heading="Small team, big ambitions"
      description="Every person here has a direct impact on the product."
      image={{ src: "https://images.unsplash.com/photo-1541747142006-76cbe366c675?w=1200&h=500&fit=crop", alt: "Team working together" }}
      team={[
        { name: "Sarah Chen", role: "CEO & Co-Founder", avatar: { src: "https://images.unsplash.com/photo-1494790108377-be9c29b29330?w=100&h=100&fit=crop", alt: "Sarah Chen" } },
        { name: "Marcus Johnson", role: "CTO & Co-Founder", avatar: { src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop", alt: "Marcus Johnson" } },
        { name: "Elena Rodriguez", role: "Head of Design" },
      ]}
      stats={[
        { value: "22", label: "Team Members" },
        { value: "8", label: "Countries" },
        { value: "55%", label: "Engineers" },
        { value: "100%", label: "Remote-Friendly" },
      ]}
      quote={{
        text: "We hire for curiosity and kindness.",
        author: "Marcus Johnson",
        role: "CTO & Co-Founder",
        avatar: { src: "https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?w=100&h=100&fit=crop", alt: "Marcus Johnson" },
      }}
      buttons={[{ label: "See All Positions", href: "https://beste.co" }]}
    />
  );
}

Props

Prop	Type	Default	Description
`badge`	`{ label: string; variant?: "default" \| "secondary" \| "outline" }`	–	Small label above the heading
`heading`	`string`	–	Section heading
`description`	`string`	–	Section intro text
`image`	`{ src: string; alt: string }`	–	Wide photo below the header
`team`	`TeamMember[]`	`[]`	Team roster in the left column
`stats`	`StatItem[]`	`[]`	Numbers in the compact right-column grid
`quote`	`{ text: string; author: string; role: string; avatar?: { src: string; alt: string } }`	–	Culture quote card under the stats grid
`buttons`	`ButtonItem[]`	`[]`	CTAs at the bottom of the section
`className`	`string`	–	Extra classes for the outer `<section>`

type TeamMember = { name: string; role: string; avatar?: { src: string; alt: string } };
type StatItem = { value: string; label: string };

type ButtonItem = {
  label: string;
  href?: string;
  variant?: "default" | "secondary" | "outline" | "ghost" | "link" | "destructive";
};

Behavior notes

The team roster is name and role only; TeamMember has no description, social links, or bio field, so this block reads as a compact directory rather than a full bio grid.
Team rows and the layout split (lg:grid-cols-[2fr_1fr]) both weight the roster heavier than the stats/quote column.
Every avatar (team members and the quote author) falls back to initials from the name when no avatar.src is provided, via name.split(" ").map((n) => n[0]).join("").
The photo above the roster is a fixed aspect-[12/5] wide-format crop; there is no portrait variant.
This is the only About block in the set whose buttons render a trailing ArrowRight icon; sibling blocks use plain text-only buttons.

More About blocks

View all About

PRO

about2

Values with Team Photo

Full-width team photo with a three-column values grid below. Great for culture pages and brand storytelling.

PRO

about23

Story, Image & Team Row

Two-column layout with company story, stats, and leadership quote on the left, team photo and avatar row on the right.

PRO

about60

Team Member Grid

Team section with an eyebrow, big heading, description and CTA above a responsive grid of people cards (portrait image, name, role).

PRO

about19

Company At a Glance

Full company overview with panoramic image, story paragraph, key facts list, leadership quote, and stats row. A rich, multi-section layout for company landing pages.

PRO

about1

Team & Mission

Two-column about section with mission statement, company stats, and team member grid. Perfect for company pages and landing sections.

PRO

about11

Hero Banner with Avatars

Wide hero image with gradient overlay text, inline stats, and a stacked avatar strip of team members.