# 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