Sales Team Contact Rows

Realestate47: Sales Team Contact Rows

A sales team list with portraits: heading and lead across the top, then one hairline row per person with a round portrait, name and role on the left and phone, email and spoken languages as a three-column definition list on the right. An office-hours footnote under a final hairline closes the block.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate47.tsx plus the badge24 rule eyebrow; the rows themselves are plain markup with no shadcn/ui primitives.

Quick start

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

import { Realestate47, realestate47Demo } from "@/components/beste/block/realestate47";

export default function Page() {
  return <Realestate47 {...realestate47Demo} />;
}

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

import { Realestate47 } from "@/components/beste/block/realestate47";

export default function Page() {
  return (
    <Realestate47
      eyebrow="The sales team"
      heading="Three people who know every home by its number."
      description="Call or write to whoever suits the question."
      people={[
        { name: "Laura Marling", role: "Sales director", phone: "+44 20 7946 0000", email: "[email protected]", languages: ["English", "French"], avatar: { src: "/team/laura.webp", alt: "Portrait of Laura Marling" } },
        { name: "Jon Hopkins", role: "Sales consultant", phone: "+44 20 7946 0000", email: "[email protected]", languages: ["English", "Spanish"], avatar: { src: "/team/jon.webp", alt: "Portrait of Jon Hopkins" } },
      ]}
      labels={{ phone: "Phone", email: "Email", languages: "Speaks" }}
      note="Office hours are Monday to Friday 9:00 to 18:00 and Saturday 10:00 to 17:00."
    />
  );
}

Props

type Person = {
  name: string;
  role: string;
  phone: string;
  email: string;
  languages: string[];
  avatar: { src: string; alt: string };
};

type Labels = { phone?: string; email?: string; languages?: string };

Behavior notes

• Each portrait is a plain lazy-loaded img cropped to a 56 px circle with object-cover, on a bg-muted ground while it loads; no initials are shown.
• The phone number is linked as tel: with everything but digits and the plus sign stripped, and the email as mailto:; both links are plain anchors so they work without a router.
• Languages are joined with commas into one line; on small screens the languages cell spans the full width under phone and email.
• Rows rise 120 ms apart and each draws its own hairline as it appears; the footnote's hairline and text follow after the last row. With prefers-reduced-motion nothing moves.