Schools and Essentials Columns

Realestate29: Schools and Essentials Columns

A three-column amenities list for a development's location page: Schools, Health and Everyday, each a titled list of places with a name, a rating or type, and the walking distance on the right. Hairlines draw above every row and close each column, the columns and their rows rise in a staggered sequence from left to right, rows darken on hover, and a footnote about ratings and catchments ends the section.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate29.tsx plus the badge24 rule eyebrow and the shadcn/ui button primitive it depends on.

Quick start

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

import { Realestate29, realestate29Demo } from "@/components/beste/block/realestate29";

export default function Page() {
  return <Realestate29 {...realestate29Demo} />;
}

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

import { Realestate29 } from "@/components/beste/block/realestate29";

export default function Page() {
  return (
    <Realestate29
      eyebrow="Schools and essentials"
      heading="The everyday is already here"
      description="Distances are from the courtyard gate."
      groups={[
        {
          title: "Schools",
          items: [
            { title: "St Olave's primary", description: "Rated outstanding", distance: "9 min" },
            { title: "Riverside nursery", description: "Ages 1 to 4", distance: "5 min" },
          ],
        },
        {
          title: "Health",
          items: [
            { title: "Brickfield Health Centre", description: "GP practice, taking patients", distance: "11 min" },
            { title: "Riverside pharmacy", description: "Open until 10", distance: "4 min" },
          ],
        },
        {
          title: "Everyday",
          items: [
            { title: "Riverside Market", description: "Food hall and groceries", distance: "4 min" },
            { title: "Post office", description: "Parcels and banking", distance: "5 min" },
          ],
        },
      ]}
      note="School ratings are the latest published inspection grades."
    />
  );
}

Props

type Entry = {
  title: string;
  description: string;
  distance: string;
};

type Group = {
  title: string;
  items: Entry[];
};

Behavior notes

• Columns start 0.12 s apart and each column's rows follow its title 0.08 s apart, so the sequence runs down the first column, then the second, then the third; the footnote waits for the longest column to finish.
• Every row has a hairline on top that draws from the left at the moment the row rises, and a closing hairline draws under the last row of each column.
• Hovering a row darkens its rating line and distance from the muted colour to the foreground colour over 0.3 s.
• description is free text for a rating ("Rated outstanding"), a type ("Dentist") or an opening note ("Open until 10"); distance is a plain string shown in tabular figures.
• With prefers-reduced-motion the rows and hairlines render in their final state without entering.