Section Architecture · v0.8.3.8.4

Section Architecture

Reusable section types map page data to patterns, components, tokens, and image roles.

hero

Hero

Primary attention section with headline, lead, image, and actions.

Hero
Components
heading, paragraph, button, image
Image role
hero

section

Intro

Short context section that sets up the rest of the page.

Intro
Components
heading, paragraph, label
Image role
landscape

feature-grid

Feature Grid

Grid of benefit, feature, service, or category cards.

Feature Grid
Components
card, badge, image, button
Image role
card

split-content

Content Split

Two-column image/text section for explanation or storytelling.

Content Split
Components
heading, paragraph, button, image
Image role
landscape

section

Card Grid

Reusable multi-card content region.

Card Grid
Components
card, label, button, image
Image role
card

statistics

Stat Band

Metric or proof-point section.

Stat Band
Components
statistic, label
Image role
background

cta-banner

CTA

Conversion section with one clear next action.

CTA
Components
heading, paragraph, button, image
Image role
banner

faq-list

FAQ

Question-and-answer section for support or conversion.

FAQ
Components
heading, paragraph, list
Image role
logo-light

section

Testimonial

Quote section with optional avatar and attribution.

Testimonial
Components
quote, avatar, image
Image role
avatar

contact-panel

Contact Form

Shared Forms system embedded in a conversion page.

Contact Form
Components
form, input, textarea, select, button
Image role
background

section

Article Body

Long-form reading section with typography, figure, and blockquote support.

Article Body
Components
heading, paragraph, blockquote, figure, image
Image role
landscape