first commit

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

@@ -0,0 +1,42 @@
+# 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