Minimal Awards Grid

Realestate52: Minimal Awards Grid

A quiet awards and certifications section: the heading and intro, then the awards in a three-column grid with no rules or icons, each just its year, the award in medium type and the body that gave it, rising row by row, with a short note to close.

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://beste.dev/r/realestate52?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

npx shadcn add "https://beste.dev/r-base/realestate52?email=YOUR_EMAIL&license_key=YOUR_KEY"

This installs the block to components/beste/block/realestate52.tsx plus the badge24 eyebrow it renders above the heading; no shadcn/ui primitives are needed.

Quick start

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

import { Realestate52, realestate52Demo } from "@/components/beste/block/realestate52";

export default function Page() {
  return <Realestate52 {...realestate52Demo} />;
}

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

import { Realestate52 } from "@/components/beste/block/realestate52";

export default function Page() {
  return (
    <Realestate52
      eyebrow="Awards and certifications"
      heading="Recognised before the first key was handed over"
      description="The design and the build have been judged by people who do this for a living."
      awards={[
        { year: "2026", title: "Best new homes scheme, under 50 homes", body: "National New Homes Awards" },
        { year: "2025", title: "Excellent rating for sustainability", body: "Building Performance Institute" },
        { year: "2024", title: "Conservation award for the warehouse restoration", body: "Riverside Civic Trust" },
      ]}
      note="Awards for the finished scheme will be entered after completion in spring 2027."
    />
  );
}

Props

type Award = {
  year: string;
  title: string;
  body: string;
};

Behavior notes

• The awards sit in one, two and then three columns (sm, lg) with generous gaps and nothing between them: no rules, no icons, no cards.
• Each award is three lines: the year in small muted tabular type, the title in medium weight, and the awarding body in muted text.
• Awards rise 16 pixels as they scroll into view, 0.1 seconds apart within a row of three, and the note rises after them.
• With prefers-reduced-motion everything renders in place with no entrance.