43 lines
1.1 KiB
Markdown
43 lines
1.1 KiB
Markdown
# 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
|