agent-skills/sn-infographic/references/layouts/containerization.md

containerization

All content is placed inside visible borders or background blocks.

Structure

• Every content group enclosed in a distinct container (card, box, or panel)
• Containers clearly separate different topics or sections
• Consistent container style (border, shadow, or background)
• Containers may be nested for sub-grouping

Best For

• Multi-topic infographics needing clear separation
• Reference cards and cheat sheets
• Structured data with distinct categories
• Dashboard-style layouts

Visual Elements

• Visible borders or background fills per container
• Consistent padding inside containers
• Optional header bar per container
• Drop shadows or rounded corners for depth

Text Placement

• Section title in container header
• Content within the container body
• Overall title above all containers

Recommended Pairings

• ui-wireframe: Clean boxed interface layouts
• corporate-memphis: Colorful card-based designs
• technical-schematic: Structured system diagrams