Section Inventory
25 Canonical Sections
Each section references one universal pattern and known component dependencies.
| # | Section | Pattern | Primary Components |
|---|---|---|---|
| 1 | Announcement / Utility Bar | full-width-band |
cluster, links, alert |
| 2 | Primary Header / Navigation | sidebar-layout |
logo, nav, search, cta, hamburger |
| 3 | Hero Section | hero-overlay |
heading, copy, cta, form |
| 4 | Logo / Trust Bar | full-width-band |
logo-grid, marquee |
| 5 | Intro / Overview Section | centered-stack |
headline, summary, feature-summary |
| 6 | Feature Grid | feature-grid |
feature-card, icon-card |
| 7 | Feature Split | two-column-split |
text-block, media |
| 8 | Benefits / Value Section | two-column-split |
icon-list, stat-cards |
| 9 | Process / How It Works | step-timeline |
numbered-cards, timeline |
| 10 | Stats / Metrics | full-width-band |
stats-grid, stat-card |
| 11 | Case Studies / Portfolio | media-grid |
case-study-card, featured-project |
| 12 | Testimonials | card-row |
testimonial-card, avatar |
| 13 | Pricing | card-row |
pricing-card, pricing-toggle |
| 14 | Product / Service Detail | two-column-split |
tabs, media-row |
| 15 | Comparison Section | dashboard-data |
comparison-table |
| 16 | FAQ Section | list-layout |
accordion |
| 17 | Call To Action Band | full-width-band |
cta, button-group |
| 18 | Lead Capture Section | two-column-split |
form, value-copy |
| 19 | Blog / Content Feed | feature-grid |
blog-card, featured-post |
| 20 | Media / Gallery Section | media-grid |
gallery, masonry |
| 21 | Team / People | feature-grid |
team-card, profile-grid |
| 22 | Location / Contact Section | two-column-split |
map, contact-card, mini-form |
| 23 | Timeline / Story | step-timeline |
timeline-list |
| 24 | Download / Resource Section | feature-grid |
resource-card |
| 25 | Footer | full-width-band |
nav, legal, social, newsletter |