One of the most powerful techniques in Framer is nesting stacks inside other stacks. This lets you build complex layouts — like a row of cards where each card has its own vertical stack of content — all without touching any code.

Understanding Nested Stacks

Think of nested stacks like Russian dolls. The outer stack controls the big structure (e.g., three columns side by side). Inside each column, another stack controls the vertical flow (icon, title, description). Each stack is independent and has its own gap, padding, and alignment.

A Common Example in Your Template

Feature card sections often work like this:

Horizontal Stack (outer) — gap: 24px ├── Vertical Stack (card 1) — gap: 12px │ ├── Icon │ ├── Heading │ └── Description ├── Vertical Stack (card 2) — gap: 12px │ ├── Icon │ ├── Heading │ └── Description └── Vertical Stack (card 3) — gap: 12px ├── Icon ├── Heading └── Description

Editing a Nested Stack

1. Click on a card on the canvas. This selects the outer (parent) stack.

2. Double-click to go inside and select the inner (child) stack.

3. Double-click again to select individual elements like the icon or text.

4. Press Escape to go back up a level.

💡 Tip: Use the Layers panel to navigate nested stacks — it's often easier to click the layer name directly in the panel than to double-click through multiple levels on the canvas.