Studio At A Glance

Agency16: Studio At A Glance

Two-column studio overview: copy, a definition-list of quick facts, and a pair of highlight stats pinned to the bottom on the left, a full-bleed studio photo on the right.

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

Base UI flavor

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

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

Quick start

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

import { Agency16, agency16Demo } from "@/components/beste/block/agency16";

export default function AboutPage() {
  return <Agency16 {...agency16Demo} />;
}

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

import { Agency16 } from "@/components/beste/block/agency16";

export default function AboutPage() {
  return (
    <Agency16
      label="Studio at a glance"
      heading="A small studio with a long memory for craft."
      description="We keep the roster deliberately small so the people you meet are the people who do the work."
      facts={[
        { label: "Founded", value: "2016, Portland" },
        { label: "Location", value: "Remote-first" },
        { label: "Team", value: "11 makers" },
      ]}
      image={{
        src: "https://images.unsplash.com/photo-1497366216548-37526070297c?w=1600&h=1600&fit=crop",
        alt: "Studio workspace with desks and natural light",
      }}
      highlights={[
        { value: "140+", label: "Projects shipped" },
        { value: "9 yrs", label: "Building together" },
      ]}
    />
  );
}

Props

type Fact = { label: string; value: string };
type Highlight = { value: string; label: string };
type StudioImage = { src: string; alt: string };

Behavior notes

• The left column is a flex column with mt-auto on the highlights block, so highlights always sinks to the bottom of the column regardless of how much facts/description content precedes it.
• facts render as a <dl> with a top border on the first row and a bottom border on every row, giving a ruled table effect without an actual <table>.
• The image panel scales up slightly on hover (group/agency16, scale-105, 500ms) and has no overlay chips or caption, unlike other agency image panels in this set.
• On mobile the image panel gets an explicit min-h-[420px]; from lg up it relies on items-stretch on the parent grid to match the left column's height instead.