Numbered Services List

Agency23: Numbered Services List

A light-weight services section: an eyebrow over a hairline rule, a two-column heading/description split, and a monospace-numbered editorial list of services with title and description columns.

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

Base UI flavor

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

This installs the block to components/beste/block/agency23.tsx, the badge23 component it uses for the eyebrow, and its dependencies.

Quick start

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

import { Agency23, agency23Demo } from "@/components/beste/block/agency23";

export default function ServicesPage() {
  return <Agency23 {...agency23Demo} />;
}

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

import { Agency23 } from "@/components/beste/block/agency23";

export default function ServicesPage() {
  return (
    <Agency23
      badge={{ label: "White glove" }}
      heading="The parts you'd rather not do, handled by our team"
      description="Switching systems is the scary bit. Our team carries it for you."
      items={[
        {
          title: "Migration & setup",
          description: "We move your records across and check every one before you go live.",
        },
        {
          title: "Training & rollout",
          description: "Short, role-specific sessions get your team confident in an afternoon.",
        },
        {
          title: "Ongoing partnership",
          description: "A named contact stays with you after launch to tune workflows.",
        },
      ]}
    />
  );
}

Props

type Badge = { label: string };
type Service = { title: string; description: string };

Behavior notes

• The section explicitly sets bg-background on its own <section> wrapper rather than inheriting the page background, unlike most other blocks in this set which stay transparent.
• heading and items[].title are rendered font-light, not font-bold/font-semibold, giving the section a deliberately thin, editorial type treatment that differs from the rest of the Agency category.
• The header is a two-column grid on md (heading left, description right via md:justify-end); below md they stack with the heading first.
• Each row's index is zero-padded (01, 02, …) and set in font-mono, the only monospace usage in the component, to read as a typographic tag rather than a numbered list marker.
• Rows use a fixed md:grid-cols-[auto_1fr_1.3fr] template (number, title, description) with a bottom rule on every row, including the last.