agent-skills/sn-infographic/references/layouts/three-tier.md

three-tier

Layout divided horizontally into top, middle, and bottom sections.

Structure

• Three horizontal bands stacked vertically
• Each band has a distinct role: header / body / footer
• Bands may have different heights (e.g., 20% / 60% / 20%)
• Clear visual separation between bands

Variants

Variant	Focus	Visual Emphasis
Header-Body-Footer	Standard page structure	Title top, content middle, CTA bottom
Intro-Detail-Summary	Educational flow	Hook top, depth middle, takeaway bottom

Best For

• Structured educational infographics
• Report-style layouts
• Before/during/after narratives
• Multi-phase process overviews

Visual Elements

• Distinct background colors or textures per band
• Horizontal rules or decorative dividers
• Icons or illustrations anchoring each band

Text Placement

• Top band: title and hook
• Middle band: main content, data, or steps
• Bottom band: summary, CTA, or source

Recommended Pairings

• corporate-memphis: Business reports
• chalkboard: Educational breakdowns
• aged-academia: Historical or academic content