Wide team photo, member list with avatars, team stats grid, and a culture quote. A rich team showcase layout.
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.
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.
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/about20?email=YOUR_EMAIL&license_key=YOUR_KEY"Base UI flavor
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.
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.
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:
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" }]}
/>
);
}| 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";
};TeamMember has no description, social links, or bio field, so this block reads as a compact directory rather than a full bio grid.lg:grid-cols-[2fr_1fr]) both weight the roster heavier than the stats/quote column.avatar.src is provided, via name.split(" ").map((n) => n[0]).join("").aspect-[12/5] wide-format crop; there is no portrait variant.ArrowRight icon; sibling blocks use plain text-only buttons.about2
Full-width team photo with a three-column values grid below. Great for culture pages and brand storytelling.
about23
Two-column layout with company story, stats, and leadership quote on the left, team photo and avatar row on the right.
about60
Team section with an eyebrow, big heading, description and CTA above a responsive grid of people cards (portrait image, name, role).
about19
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.
about1
Two-column about section with mission statement, company stats, and team member grid. Perfect for company pages and landing sections.
about11
Wide hero image with gradient overlay text, inline stats, and a stacked avatar strip of team members.