DesignDojo
Component Card

Container

Constrain page width so content stays readable and focused.

Max width frameOuter marginOuter margin
Container anatomy

When to Use

  • Page layout root for dashboards, docs, and marketing pages.
  • Readable text width so paragraphs stay comfortable.
  • Consistent horizontal padding across breakpoints.

When NOT to Use

Use one container per page section and keep child blocks aligned to it.

Use full-bleed sections for rare visual breaks like hero backgrounds. Keep core content constrained even when backgrounds are wide.

Variants

sm: ~640px
md: ~768px
lg: ~1200px

Confused?

If you are deciding between Container and Grid, start with container first, then place a grid inside it.

Agent Prompts

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

Agent Prompts

Cursor Prompt

Create a page container with a max width around 1200px, centered horizontally, with responsive side padding that scales from mobile to desktop.

Pencil Prompt

Add a centered container frame that constrains content width while keeping generous side padding at all breakpoints.

Next Lesson

Grid