Mortgage Partner Rate Table

Realestate42: Mortgage Partner Rate Table

A lender table for a development's sales page: a header with eyebrow, heading and intro, a caption row, then one row per lender (name, product, initial rate as a light figure, fixed term, note) under hairlines that draw in as the rows rise in order. A representative example paragraph and a button to the payment estimator sit under the closing hairline, and each row reflows to two columns on small screens.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate42.tsx plus the badge24 rule eyebrow, the button25 quiet pill used for the estimator button, and the shadcn/ui button primitive behind it.

Quick start

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

import { Realestate42, realestate42Demo } from "@/components/beste/block/realestate42";

export default function Page() {
  return <Realestate42 {...realestate42Demo} />;
}

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

import { Realestate42 } from "@/components/beste/block/realestate42";

export default function Page() {
  return (
    <Realestate42
      eyebrow="Mortgage partners"
      heading="Five lenders who already know Alder Row"
      description="Each lender has valued the development and agreed to lend on homes bought off plan."
      lenders={[
        { name: "Hartwell Bank", product: "Two year fixed", rate: "4.79%", term: "2 years", note: "Up to 85% loan to value" },
        { name: "Riverside Building Society", product: "Five year fixed", rate: "4.52%", term: "5 years", note: "No arrangement fee" },
        { name: "Northgate Mortgages", product: "New build tracker", rate: "4.95%", term: "2 years", note: "Base rate plus 0.45%" },
      ]}
      labels={{ name: "Lender", product: "Product", rate: "Initial rate", term: "Fixed for", note: "Note", example: "Representative example" }}
      example="A mortgage of $512,000 payable over 30 years on a fixed rate of 4.52% for 5 years would require 60 monthly payments of $2,600. The overall cost for comparison is 5.9% APRC representative."
      button={{ label: "Estimate your monthly payment", href: "/estimator" }}
    />
  );
}

Props

type Lender = {
  name: string;
  product: string;
  rate: string;
  term: string;
  note: string;
};

type Labels = {
  name?: string;
  product?: string;
  rate?: string;
  term?: string;
  note?: string;
  example?: string;
};

Behavior notes

• Rows rise 0.1 s apart from 0.4 s, after the caption row at 0.3 s, and each draws a hairline on its top edge with the same delay; a closing hairline draws after the last row and the example and button rise 0.1 s after it.
• On desktop each row is a twelve column grid (name 3, product 3, rate 2, term 2, note 2) aligned on the baseline; the caption row above uses the same columns and is hidden from assistive technology because every cell is self-explanatory text.
• On small screens the row becomes two columns: the lender name with the rate on the right, the product on its own line, then the term (prefixed with labels.term) and the note; CSS order keeps the desktop column sequence without duplicating markup.
• Rates and terms are strings so any format (a percentage, a tracker margin, a term in months) can be shown; the rate is set in the set's small figure style.
• With prefers-reduced-motion the rows are not offset or faded and the hairlines render complete.