DesignDojo
1.2-components · 03-stack

Estimated time: 6 min

Stack anatomy

When to Use

  • Forms and settings sections with vertical progression.
  • Card internals like title, body, and actions.
  • Any one-dimensional layout where order matters.

When NOT to Use

Use a stack for sequential reading order and one spacing scale value.

Use grid when you need two-dimensional placement and column control.

Variants

Vertical stack
Horizontal stack
Responsive switch

Confused?

If a section needs separators between groups, combine stack with Divider.

Agent Prompts

Use the copy-ready Cursor and Pencil prompts in the prompt panel below this card.

Agent Prompts

Cursor Prompt

Refactor this panel into a vertical stack with a single spacing scale so heading, body, and actions keep consistent rhythm.

Pencil Prompt

Arrange these elements in a vertical stack and use one spacing scale value set for all internal gaps.

Progress saves locally on this device.

Learning Loop

Lock this lesson in with a fast cycle: quiz the module, drill flashcards, then run the daily challenge.

Take Module QuizPractice FlashcardsRun Daily Challenge

Next Lesson

Divider