Awards List

Agency15: Awards List

Editorial award list where each row lines up a year, the award title and the winning project, and a right-aligned recognition sentence, with a running award count sitting opposite the section heading.

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

Base UI flavor

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

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

Quick start

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

import { Agency15, agency15Demo } from "@/components/beste/block/agency15";

export default function AboutPage() {
  return <Agency15 {...agency15Demo} />;
}

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

import { Agency15 } from "@/components/beste/block/agency15";

export default function AboutPage() {
  return (
    <Agency15
      label="Awards & Recognition"
      heading="A shelf earned one launch at a time."
      summary="48 awards since 2016"
      awards={[
        {
          year: "2025",
          title: "Site of the Year",
          project: "Meridian Capital — Polaris",
          recognition: "Honored for a fund report that turns spreadsheets into a guided narrative.",
        },
        {
          year: "2024",
          title: "Developer Award",
          project: "Atlas Field Notes — Polaris",
          recognition: "Recognized for a near-zero-bundle reading experience.",
        },
        {
          year: "2023",
          title: "Honor of Distinction",
          project: "Cobalt Studios — Polaris",
          recognition: "Cited for a typographic system that carries the brand alone.",
        },
      ]}
    />
  );
}

Props

type Award = {
  year: string;
  title: string;
  project: string;
  recognition: string;
};

Behavior notes

• Rows are laid out as 120px_1fr_auto grid columns from md up (year, title/project, recognition); below md they stack to a single column.
• Each row is a horizontal rule that shifts slightly right on hover (md:hover:pl-3), giving a subtle editorial-list interaction with no click target.
• summary and heading share a flex row that stacks on mobile and goes side by side (items-end justify-between) from md up, so the stat visually anchors to the heading's baseline on desktop.
• The recognition text is right-aligned on desktop (md:text-right) and capped at max-w-sm, keeping long descriptions from stretching the third column.