Studio Values

Agency12: Studio Values

Operating-principles section with a split header (large heading left, vertical divider, eyebrow badge right) above a two-column list of values, each marked with an oversized ghost numeral, a keyword, a title, and a description.

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

Base UI flavor

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

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

Quick start

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

import { Agency12, agency12Demo } from "@/components/beste/block/agency12";

export default function AboutPage() {
  return <Agency12 {...agency12Demo} />;
}

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

import { Agency12 } from "@/components/beste/block/agency12";

export default function AboutPage() {
  return (
    <Agency12
      label="Operating Principles"
      heading="The principles that hold every engagement together."
      values={[
        {
          keyword: "Rigor",
          title: "Evidence before instinct",
          description: "We pressure-test every creative bet against real signal.",
        },
        {
          keyword: "Restraint",
          title: "Edit until it hurts",
          description: "The strongest version is usually the one with the most cut away.",
        },
      ]}
    />
  );
}

Props

type ValueItem = { title: string; description: string; keyword: string };

Behavior notes

• The header uses a md:grid-cols-[1fr_auto_1fr] grid with a hairline vertical divider (w-px bg-border) between the heading and the label column; the divider is hidden below md.
• Each value's numeral (01, 02, ...) is generated from its array index with String(index + 1).padStart(2, "0"), not from a field on the data, so reordering values renumbers automatically.
• The numeral is select-none and starts at text-muted-foreground/30; hovering the value's article (via the group/agency12 class) brightens it to text-primary/40 as a subtle interactive cue.
• keyword renders above title as a small bold uppercase label in text-primary, functioning as a category tag distinct from the title itself.
• The grid is a static md:grid-cols-2; it does not adapt column count to values.length, so an odd number of entries leaves the last row with one item.