← Kairos MBA MasterclassAll programsHomeSearch
Kairos MBA Masterclass·1:06:28

Building Properties Details, Part 1: Binding Page Data, the Price Box, and the Map Element (partial transcript)

Mayank Build trainer - co-founder of Epic, a Delhi no-code/low-code product studio (80+ products); builds the real-estate marketplace in Bubble on camera
▶LMS lesson
← PreviousBuilding the Homepage, Part 3: Featured Properties Skeleton, Reusable Elements, and the Re
Lesson 12 of 48 in Kairos MBA Masterclass
Next →Building Properties Details, Part 2: Floating CTA, Popup Form, Sign-up-or-Update, Booking,

The short version

  1. Only the last 13 minutes are transcribed. Detail page type of content = Listing, so any text shows 'Current page Listing's name' via Insert dynamic data; name H4, location semibold 18-20 dark slate gray (0:55-0:59).
  2. Price box: small white group (round 10, border, ~120 x 60) with the bound price and '/ per month' added in rich text with a space after the dynamic value (1:00-1:01).
  3. Map element under the address: single marker, address = Current page Listing's location, Apple Maps style, roundness 10-20, zoom 10-20, min 200-320 x 350-450, custom marker from Figma; needs the Google keys from the API tutorial (1:02-1:06).

At a glance, three clicks deep

Skim here first: the closed row is the glance, open is the study card with the key points and timestamps, and the ↓ link drops to that concept's full write-up below.

01Binding the page's Listing into text, the price box, and the mapPage type -> dynamic data -> bound text, price, map.›

Page type -> dynamic data -> bound text, price, map.

Text binding (0:55-0:59)

Price box (1:00-1:01)

Map (1:02-1:06)

↓ Full write-up of this concept

The concepts in full

01

Binding the page's Listing into text, the price box, and the map

Set the page's type of content once and every text on it can say 'Current page Listing's ...'.

With the detail page's type of content = Listing, Insert dynamic data gives 'Current page Listing's name', location, price. Name as H4; location semibold 18-20, letter spacing -1 or 0, line height 1.5, dark slate gray; about-property text reuses it. Price box: white group, roundness 10, dark slate gray border, min 120 x 60, text bound to price with '/ per month' typed in the rich text editor after a space - never hard-code the number. Map element: Single marker; Address = Current page Listing's location; Apple Maps style; roundness 10-20; zoom 10-20 (higher is closer); min width 200-320, min height 350-450; margins 20; custom marker icon exported from Figma under 'Customize marker icon'. Requires the Google Geocode and Maps keys.

Why it matters

The pattern - page type, dynamic data, element bound to it - is every detail page you will ever build.

This idea elsewhererequiresGoogle keys from the API tutorial

Tools referenced

ToolCoverageMomentContext
Bubbledemonstrated
Google MapsdemonstratedMap element

Action items

    Resources mentioned

    Resources
    • docLesson page on the platform

    Extraction notes

    This page was built from an auto-generated transcript, which garbles product and people's names. Those were corrected silently in everything above and logged here for transparency. The warnings flag claims that were true on the recording day but change fast.

    Transcript corrections applied

    The transcript saysThe trainer actually means
    real start date / real aesthetics / real staticreal estate
    Type / Cypress / Skype / SykesStripe
    Mando / Mandrope / MangroveManrope (font)
    repeating loop / repeating rowrepeating group
    paid listings nameCurrent page Listing's name

    True on recording day — verify before relying

    ← PreviousBuilding the Homepage, Part 3: Featured Properties Skeleton, Reusable Elements, and the ReNext →Building Properties Details, Part 2: Floating CTA, Popup Form, Sign-up-or-Update, Booking,