Shared Spaces Photo Cards

Shared spaces

Rooms every resident gets, beyond their own front door

Four spaces looked after by the concierge and covered by the service charge, so the building works a little like a good house with more rooms.

  • A roof terrace with oak chairs and planted beds looking over the river
    01

    Roof garden

    Planted beds, oak chairs and the long view down the river, on top of the warehouse.

    Where
    Warehouse, roof
    Opening hours
    7:00 to 23:00
  • A long oak dining table under a linen pendant, the river lights through an arched window
    02

    Residents' dining room

    A long oak table for twelve and a full kitchen, bookable for birthdays and long Sunday lunches.

    Where
    Warehouse, ground floor
    Opening hours
    By booking
  • A study under timber trusses with an oak desk and a round skylight
    03

    Work room

    Six desks under the old timber trusses, a skylight and fast fibre, a short walk from bed.

    Where
    Warehouse, fourth floor
    Opening hours
    Open all day
  • A bedroom with grey-green linen and a balcony onto the birches
    04

    Guest suite

    A bedroom with its own shower room for visiting family, from $90 a night.

    Where
    Courtyard wing, first floor
    Opening hours
    By booking

Every space is cleaned daily and booked through the residents' app.

About this block

Shared Spaces Photo CardsPRO

The shared spaces of a development as four muted photo cards: each opens with a 4:3 photograph that unveils once loaded and drifts with the scroll, then a number, the space, a line on what it offers and a hairline row with where it is and when it is open. Cards rise in order and a short note closes the section.

Realestate66: Shared Spaces Photo Cards

The shared spaces of a development as four muted photo cards: each opens with a 4:3 photograph that unveils once loaded and drifts with the scroll, then a number, the space, a line on what it offers and a hairline row with where it is and when it is open. Cards rise in order and a short note closes the section.

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

Base UI flavor

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

This installs the block to components/beste/block/realestate66.tsx plus the badge24 rule eyebrow; no shadcn/ui primitives are needed.

Quick start

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

tsx
import { Realestate66, realestate66Demo } from "@/components/beste/block/realestate66";

export default function Page() {
  return <Realestate66 {...realestate66Demo} />;
}

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

tsx
import { Realestate66 } from "@/components/beste/block/realestate66";

export default function Page() {
  return (
    <Realestate66
      eyebrow="Shared spaces"
      heading="Rooms every resident gets, beyond their own front door"
      description="Looked after by the concierge and covered by the service charge."
      spaces={[
        {
          title: "Roof garden",
          description: "Planted beds, oak chairs and the long view down the river.",
          where: "Warehouse, roof",
          hours: "7:00 to 23:00",
          image: { src: "https://oud.pics/b/realestate/alder-roof-terrace.webp", alt: "A roof terrace over the river" },
        },
        {
          title: "Work room",
          description: "Six desks under the old timber trusses and fast fibre.",
          where: "Warehouse, fourth floor",
          hours: "Open all day",
          image: { src: "https://oud.pics/b/realestate/alder-study-trusses.webp", alt: "A study under timber trusses" },
        },
      ]}
      labels={{ where: "Where", hours: "Opening hours" }}
      note="Every space is booked through the residents' app."
    />
  );
}

Props

PropTypeDefaultDescription
eyebrowstring–Short line above the heading, rendered through badge24.
headingstring–Section heading.
descriptionstring–Intro paragraph beside the heading.
spacesSpace[][]One card per shared space, in order.
labels{ where?: string; hours?: string }{}Screen reader names for the location and hours on each card.
notestring–Short note under the cards.
classNamestring–Extra classes merged onto the section.
ts
type Space = {
  title: string;
  description: string;
  where: string;
  hours: string;
  image: { src: string; alt: string };
};

Behavior notes

  • Cards sit in one, two and then four columns (sm, lg) as rounded-md bg-muted panels; the foot row is pushed to the bottom with mt-auto, so the hairlines line up across a row even when descriptions differ in length.
  • Each photograph stays clipped until its file has loaded and its frame is in view, then opens from the top over 1.6 s while settling from a 1.18 to a 1.12 scale, and drifts from -6% to 6% with the scroll.
  • Cards rise 0.1 s apart and each photo starts on its card's delay; the hairline above the location and hours draws 0.4 s later, and the note rises after the last card.
  • With prefers-reduced-motion every initial state is skipped and the photos render in place.

More Real Estate blocks

View all Real Estate
PRO

realestate80

Partner Agents Side by Side

PRO

realestate69

Sales Progress Photo Cards

PRO

realestate32

Residence Type Cards

Get Pro