Milestone Timeline

About62: Milestone Timeline

About section with a header above a vertical timeline of milestones on a left rail, each entry marked by a year, a title, and a description, closing with a CTA button below the full timeline.

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

Base UI flavor

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

This installs the block to components/beste/block/about62.tsx, the badge7 component it uses for the eyebrow label, the button12 component it uses for the closing CTA, and its dependencies.

Quick start

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

import { About62, about62Demo } from "@/components/beste/block/about62";

export default function Page() {
  return <About62 {...about62Demo} />;
}

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

import { About62 } from "@/components/beste/block/about62";

export default function Page() {
  return (
    <About62
      badge={{ label: "The road so far" }}
      heading="A decade of quiet, <strong>deliberate work.</strong>"
      description="No overnight pivots, no chasing trends. Just one small room of designers."
      button={{ label: "Read the full studio story", href: "/story" }}
      milestones={[
        { year: "2014", title: "Two desks and a borrowed kettle", description: "Auralis started as a side practice between two type nerds." },
        { year: "2019", title: "First retainer, first real team", description: "A publishing client signed for a year and we hired three." },
        { year: "2025", title: "Small on purpose, still", description: "Eleven people, no growth targets, a waitlist we are comfortable with." },
      ]}
    />
  );
}

Props

type ActionButton = { label: string; href: string };
type About62Milestone = { year: string; title: string; description: string };

Behavior notes

• The timeline is a semantic <ol>/<li> list (not <div>s), fitting for chronologically ordered milestones, with a left rail (border-l) and a small dot marker (absolute -left-[5px]) per entry rather than a numbered badge.
• The last milestone drops its bottom padding (last:pb-0) so the rail doesn't trail empty space after the final entry.
• The button is rendered below the entire timeline, not inline with the header, and uses Button12 with no tone override (its default styling), unlike about60's outline-tone CTA.
• The layout is a single reading column (max-w-5xl) throughout; there is no alternating left/right timeline arrangement.