About Stats Grid

About34: About Stats Grid

About section with an eyebrow badge above a two-tone heading (a regular line followed by a muted <strong> continuation), then two portrait images sitting beside a hand-ruled 2x2 stats grid. There is no CTA button in this block, unlike most of its siblings.

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

Base UI flavor

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

This installs the block to components/beste/block/about34.tsx, the badge6 component it uses for the eyebrow label, and its dependencies.

Quick start

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

import { About34, about34Demo } from "@/components/beste/block/about34";

export default function Page() {
  return <About34 {...about34Demo} />;
}

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

import { About34 } from "@/components/beste/block/about34";

export default function Page() {
  return (
    <About34
      label="The Studio"
      heading="Polaris is an independent product and brand studio<br /><strong>shaping digital products ambitious teams are proud to ship.</strong>"
      images={[
        { src: "https://images.unsplash.com/photo-1522202176988-66273c2fd55f?w=800&h=1067&fit=crop", alt: "Studio portrait" },
        { src: "https://images.unsplash.com/photo-1531482615713-2afd69097998?w=800&h=1067&fit=crop", alt: "Team member portrait" },
      ]}
      stats={[
        { value: "11", title: "Years crafting products end to end." },
        { value: "60+", title: "Brands launched and scaled with us." },
        { value: "4.9", title: "Average partner satisfaction score." },
        { value: "18", title: "Makers across design and engineering." },
      ]}
    />
  );
}

Props

type ImageItem = { src: string; alt: string };
type StatItem = { value: string; title: string };

Behavior notes

• There is no button/CTA prop at all; this is a pure heading, image, and stats layout, distinct from the sibling About blocks that all carry an ActionLink.
• heading's <strong> spans are styled text-muted-foreground, not the primary accent color used in most other About blocks, giving the two-tone heading a subdued second line.
• Stats render in a fixed 2-column grid; alternating classes (border-r on even index, border-b on the first two) draw a plus-shaped divider that only lines up cleanly with exactly four items. Passing three or five stats breaks the border symmetry.
• Only the first two images entries render, each cropped to a 3:4 portrait aspect ratio; extras are dropped.