Press Quote Cards

Realestate51: Press Quote Cards

Press coverage as three quiet muted cards: each names the publication, gives the pull quote in large type and ends with the date and an arrow that lifts on hover, the whole card linking to the article; an outline button to the press kit follows.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate51.tsx plus the badge24 rule eyebrow, the button25 quiet pill used for the press kit button, and the shadcn/ui button primitive it builds on.

Quick start

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

import { Realestate51, realestate51Demo } from "@/components/beste/block/realestate51";

export default function Page() {
  return <Realestate51 {...realestate51Demo} />;
}

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

import { Realestate51 } from "@/components/beste/block/realestate51";

export default function Page() {
  return (
    <Realestate51
      eyebrow="In the press"
      heading="What the papers made of Alder Row"
      description="Coverage from the planning decision to the launch weekend."
      mentions={[
        {
          publication: "Riverside Review",
          title: "The warehouse that waited 40 years for the right idea",
          date: "12 September 2026",
          quote: "The building is better for resisting every temptation to over-polish the brick.",
          href: "/press/riverside-review",
        },
        {
          publication: "Concrete Quarterly",
          title: "A courtyard wing that lets the old building keep talking",
          date: "28 July 2026",
          quote: "The pale concrete is quiet enough that the warehouse still sets the tone.",
          href: "/press/concrete-quarterly",
        },
      ]}
      button={{ label: "Download the press kit", href: "/press-kit" }}
    />
  );
}

Props

type Mention = {
  publication: string;
  title: string;
  date: string;
  quote: string;
  href: string;
};

Behavior notes

• Cards are rounded-md bg-muted links stacked on phones and three across from lg; the date row is pushed to the foot with mt-auto, so the dates line up across a row whatever the quote length.
• Each card shows the publication, the quote as a blockquote in large type and the date with an arrow. The article title is not shown but stays in the link as screen reader text, so the link still says where it goes.
• On hover the card lightens slightly and the arrow lifts up and to the right.
• Cards rise 16 pixels as they scroll into view, 0.1 seconds apart, and the button follows; with prefers-reduced-motion everything renders in place.