Kairos MBA Masterclass·18:36

Building the Homepage, Part 3: Featured Properties Skeleton, Reusable Elements, and the Repeating Group Idea

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

The short version

Featured section: a Row with H3 'Featured properties' and a right-aligned 'Explore all' with arrow; a filter Column with four category texts (bold 18, gap 24) that will drive filtering later; padding 40 (0:00-0:11).
Reusable elements: Reusable elements > Add new > 'header' (Row, 1440) -> paste the finished header -> delete the original on index -> drag 'header' onto the page root (check with Reveal in element tree). Edit once, appears everywhere (0:12-0:17).
Repeating group: one card layout, many rows of data - type of content Listing, a data source, rows and columns - instead of hand-building six boxes; a 'properties' reusable cloned from header to keep its width (0:16-0:18).

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.

01Reusable elements: build the header onceReusable element on the page root;›

Reusable element on the page root; edit once.

Skeleton (0:00-0:11)

Reusable procedure (0:12-0:17)

↓ Full write-up of this concept

02The repeating group: one layout, many rowsRepeating group = layout x data source.›

Repeating group = layout x data source.

Concept (0:17-0:18)

↓ Full write-up of this concept

The concepts in full

Reusable elements: build the header once

Delete the header from the page and drag the reusable one onto the root. If it lands inside a group, you did it wrong - check the element tree.

PROCEDURE: Reusable elements > Add new reusable element > name 'header' > type Row, left aligned, width 1440 -> copy the finished header group from index and paste it in -> back on index delete 'group header' -> drag 'header' from the reusable list onto the page -> 'Reveal in element tree' to confirm it sits directly under the page. One edit then updates every page. Same for footer and the property-card list ('properties' cloned from header to inherit width settings). The featured-section skeleton: Row with H3 + right-aligned 'Explore all' and ~40 px arrow icon, a filter Column of four category texts (bold 18, gap 24), padding 40.

Why it matters

Repeated chrome stops being repeated work.

The repeating group: one layout, many rows

You never build the sixth card. You build one and tell it where the data comes from.

Cards share a layout while data changes, so a Repeating group - a container with a Type of content (Listing), a Data source, and rows x columns - replaces six, nine or three hand-built boxes per page. Set up here, bound to the database in the Filtering lesson.

Why it matters

The element that turns a static page into an app.

This idea elsewherecontinuesBound to Listings in the Filtering lesson

Tools referenced

Tool	Coverage	Moment	Context
Bubble	demonstrated

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 says	The trainer actually means
real start date / real aesthetics / real static	real estate
Type / Cypress / Skype / Sykes	Stripe
Mando / Mandrope / Mangrove	Manrope (font)
repeating loop / repeating row	repeating group
paid listings name	Current page Listing's name

True on recording day — verify before relying

Bubble's editor labels, menu paths and plan rules have changed since this 2023-24 recording; treat every click-path as a guide, not a map