Colophon Definition RowsPRO

About73: Colophon Definition Rows

A colophon written as a definition list, each hairline row naming one part of how the site is made, the choice itself, why it was made, and an optional link into the detail.

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

Base UI flavor

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

This installs the block to components/beste/block/about73.tsx and the badge6 component it uses for the eyebrow (installed to components/beste/component/badge6.tsx).

Quick start

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

import { About73, about73Demo } from "@/components/beste/block/about73";

export default function ColophonPage() {
  return <About73 {...about73Demo} />;
}

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

import { About73 } from "@/components/beste/block/about73";

export default function ColophonPage() {
  return (
    <About73
      eyebrow="Colophon"
      heading="How this site is made"
      description="People ask often enough that it is easier to write it down."
      rows={[
        {
          label: "Publishing",
          value: "A folder of text files",
          note: "Every piece is a plain file in version control, edits included.",
          link: { label: "See the repository", href: "https://example.com/repo" },
        },
        {
          label: "Measurement",
          value: "Page counts only",
          note: "No cookies, no profiles and nothing that follows anyone.",
        },
      ]}
      note="Last revised in March 2026."
    />
  );
}

Props

type ColophonRow = {
  label: string;
  value: string;
  note?: string;
  link?: ColophonLink;
};

type ColophonLink = {
  label: string;
  href: string;
};

Behavior notes

• The list is a real dl with dt and dd pairs, so the label and its answer stay associated for anyone reading the markup rather than the columns.
• The label column is fixed at 12rem from md up, which keeps the answers aligned down the page; below that the pair stacks.
• note and link are both optional per row, so a decision can be a bare statement, a statement with a reason, or either with somewhere to check it.
• Rows carry hairlines with no trailing rule, and the column is capped at max-w-4xl to keep the reasons readable.