Mockup — Structure Panel with Resize

Structure

⋮⋮ ▭ S-1 · Hero

⋮⋮ ▦ S-2 · Container (60%)

⋮⋮ · T H-1 · Heading

⋮⋮ · ¶ T-1 · Text

⋮⋮ ▦ S-3 · 3-Column

⋮⋮ ▦ S-4 · Col 1/3 (33%)

⋮⋮ ▦ S-5 · Col 2/3 (33%)

⋮⋮ ▦ S-6 · Col 3/3 (34%)

S-1 · Hero

Explore the World of Trees

Bring nature into the classroom with beautifully illustrated, curriculum-aligned resources that make learning about trees fun, engaging, and meaningful.

S-2

Wide column

60% width. Drag the right edge to resize.

S-3

Narrow column

40% width

S-4

Books

33%

S-5

News

33%

S-6

Contact

34%

S-7

Footer

Drag the dotted line up or down to resize this section's height.

How resize works (zero chrome):

Hover a section/column → thin - - - - dashed green line appears at its edge
Drag the line → size changes in real time, snap-tooltip shows px or %
Snap values: heights snap to 100 / 200 / 400 / 600 / 800px. Column widths snap to 25% / 33% / 50% / 66% / 75%
Hold Alt = free drag, no snap
Release → page rearranges, structure tree updates to show new size (e.g. "S-2 · Container (60%)")
Nothing else added — no grab handles, no panel, no buttons. The line IS the affordance

Why this works: the dashed line is universal — every designer knows dashed = draggable. It only shows on hover so the page itself stays clean. The structure panel on the left reflects the resize instantly so you can see the new value.