Residence Type Cards

The residences

Three types, one way of building

Polished concrete floors, oak windows and at least one outside space in every home. The three types below are the ones with homes still available.

  • A double-height living room with a brick wall, a tall oak window and a linen sofa

    Type A

    Two bedroom in the warehouse

    Bedrooms
    2
    Bathrooms
    1
    Interior
    78 m²

    From $640,000

    See Type A
  • An open kitchen with oak cabinets and a pale stone island looking onto the birch courtyard

    Type C

    Three bedroom on the courtyard

    Bedrooms
    3
    Bathrooms
    2
    Interior
    112 m²

    From $895,000

    See Type C
  • A penthouse terrace with oak chairs and a view over the river

    Type E

    Penthouse with the roof terrace

    Bedrooms
    2
    Bathrooms
    2
    Interior
    146 m²

    From $1,650,000

    See the penthouse
About this block

Residence Type CardsPRO

Three borderless residence cards for a development, each opening with a hairline, a 4:3 photograph unveiled top to bottom once loaded, the type name and title, a three-figure spec row (bedrooms, bathrooms, interior) under hairlines, the starting price and a text link with an arrow that nudges on hover.

Realestate32: Residence Type Cards

Three borderless residence cards for a development's sales page. Each card opens with a hairline, then a 4:3 photograph that is unveiled top to bottom once it has loaded and drifts slowly as you scroll, the type name and a title, a three-figure spec row (bedrooms, bathrooms, interior) under its own hairlines, the starting price and a text link with an arrow that nudges to the right on hover. The header holds an eyebrow, a heading and an intro beside it.

Upgrade to Pro

Pro blocks install through the shadcn CLI with your license key and ship their full source. Docs and live previews stay open to everyone, so you can read every block's details first.

Upgrade Now

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

bash
npx shadcn add "https://beste.dev/r/realestate32?email=YOUR_EMAIL&license_key=YOUR_KEY"

Base UI flavor

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

This installs the block to components/beste/block/realestate32.tsx plus the badge24 eyebrow; it uses no shadcn/ui primitives.

Quick start

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

tsx
import { Realestate32, realestate32Demo } from "@/components/beste/block/realestate32";

export default function Page() {
  return <Realestate32 {...realestate32Demo} />;
}

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

tsx
import { Realestate32 } from "@/components/beste/block/realestate32";

export default function Page() {
  return (
    <Realestate32
      eyebrow="The residences"
      heading="Three types, one way of building"
      description="The three types below are the ones with homes still available."
      types={[
        {
          name: "Type A",
          title: "Two bedroom in the warehouse",
          image: { src: "https://oud.pics/b/realestate/alder-warehouse-living.webp", alt: "A double-height living room with a brick wall and a tall oak window" },
          beds: "2",
          baths: "1",
          interior: "78 m²",
          from: "$640,000",
          link: { label: "See Type A", href: "/residences/type-a" },
        },
        {
          name: "Type E",
          title: "Penthouse with the roof terrace",
          image: { src: "https://oud.pics/b/realestate/alder-roof-terrace.webp", alt: "A penthouse terrace with oak chairs and a view over the river" },
          beds: "2",
          baths: "2",
          interior: "146 m²",
          from: "$1,650,000",
          link: { label: "See the penthouse", href: "/residences/penthouse" },
        },
      ]}
      labels={{ beds: "Bedrooms", baths: "Bathrooms", interior: "Interior", from: "From" }}
    />
  );
}

Props

PropTypeDefaultDescription
eyebrowstring–Short line above the heading, drawn with a rule in front of it.
headingstring–Section heading.
descriptionstring–Intro paragraph beside the heading.
typesHomeType[][]The cards, one per home type; three fit the row on desktop.
labelsLabels{}Captions for the three spec figures and the word before the starting price.
classNamestring–Extra classes merged onto the section.
ts
type HomeType = {
  name: string;
  title: string;
  image: { src: string; alt: string };
  beds: string;
  baths: string;
  interior: string;
  from: string;
  link: { label: string; href: string };
};

type Labels = {
  beds?: string;
  baths?: string;
  interior?: string;
  from?: string;
};

Behavior notes

  • Cards have no border, background or shadow; each is separated by a hairline on its top edge that draws from the left as the card rises in, with a 0.12 s stagger between cards.
  • Each photograph is gated on its own load event and on its frame entering the viewport, then opens from the top over 1.6 s while the image settles from a slight zoom; a small parallax moves it from -6% to 6% against the scroll.
  • The spec row is a three-column definition list; its hairlines draw after the card's own hairline, left to right.
  • The link is a plain next/link anchor with a lucide arrow that shifts two pixels to the right on hover; the card itself is not clickable.
  • With prefers-reduced-motion the photographs show at once, the parallax is held still and nothing rises in.

More Real Estate blocks

View all Real Estate
PRO

realestate11

Residences Floor Plan Picker

PRO

realestate83

Floor Plan Downloads

PRO

realestate33

Compare Two Residence Types

Get Pro