← Kairos MBA MasterclassAll programsHomeSearch
Kairos MBA Masterclass·29:24

Building the Homepage, Part 2: Two-Column Feature Sections, Text and Button Styles, Image Compression, Checklist Rows, and a Pre-built Footer

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 1: Box Model, Element Families, the Header in Rows, and the He
Lesson 10 of 48 in Kairos MBA Masterclass
Next →Building the Homepage, Part 3: Featured Properties Skeleton, Reusable Elements, and the Re

The short version

  1. Two-column pattern: group content (light background) > Row > left Column (texts, button, 50%) + right (image as background, min height 600-700, 50%); outer padding 80; use gap spacing not margins; the second block is a copy with the order flipped (0:04-0:16).
  2. Text: H3 headline; body 18 regular, line height 1.8, letter spacing 0 (the -2% was cramped); rich text for bold and breaks; a reusable button style, semibold 16. Images: an Image element beats a background for aspect ratio and alt text; compress with TinyPNG (350 KB example) and HandBrake for video (0:08-0:21).
  3. Checklist rows: group checkpoints (Column, 60%, gap 8) of three Row groups (check icon 20-40 px + semibold 18 text). Footer: Bubble's pre-built component trimmed to a centred logo (max width 40) and address text (0:19-0:33).

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.

01The two-column feature section and its stylesRow of two 50% Columns, padding 80, gap spacing.›

Row of two 50% Columns, padding 80, gap spacing.

Pattern (0:04-0:16)

Styles (0:08-0:17)

↓ Full write-up of this concept

The concepts in full

01

The two-column feature section and its styles

Left half text, right half image, 80 pixels of padding, and a copy with the halves swapped. Most marketing pages are this twice.

PROCEDURE: 'group content' with the Figma light background > 'group 1' (Row) > 'group left' (Column, texts and button, 50% min width) + 'group right' (image as background, min height 600-700, 50%); padding 80 all sides; gap/row spacing between children instead of margins; 'group 2' is a copy moved with the layout 'previous' control to flip order. Styles: headline H3; body 18 regular, line height 1.8, letter spacing 0 - he removes the -2% because body text looked cramped; rich text editor for bold and line breaks; a reusable button style (semibold 16) so 'Get started' and 'Learn more' match.

Why it matters

The reusable block for every content section after the hero.

Tools referenced

ToolCoverageMomentContext
Bubbledemonstrated
TinyPNGdemonstrated
Figmademonstrated
HandBrakementioned

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 1: Box Model, Element Families, the Header in Rows, and the HeNext →Building the Homepage, Part 3: Featured Properties Skeleton, Reusable Elements, and the Re