Page Composition Guides · v0.8.3.8.4

Build Pages the Monarch Way

These guides do not create a competing builder. They teach the approved path: route, page data, template, sections, patterns, components, tokens, and images.

landing template

Home Page Composition Guide

Compose a strong front door with hero, category cards, statistics, feature pathways, images, and CTA.

Route
index.php
Data file
data/pages/home.php
Sections
hero, category-grid, statistics, featured-pathways, cta-banner
Patterns
hero, statistics, cta-banner
Components
card, label, button, image
Image roles
hero, card, banner

Accessibility: Use one h1, descriptive button text, and meaningful alt text for hero imagery.

standard template

About Page Composition Guide

Tell the organization story through intro, values, timeline, team, and CTA sections.

Route
about-us/
Data file
data/pages/about-us/
Sections
page-header, intro, values, timeline, team-preview, cta
Patterns
page-header, timeline, team-grid
Components
card, quote, avatar, image
Image roles
landscape, portrait, avatar

Accessibility: Keep timeline order logical and avoid image-only identity cues.

standard template

Services Page Composition Guide

Present service families, process, benefits, proof points, FAQ, and conversion CTA.

Route
services/
Data file
data/pages/services/
Sections
page-header, service-grid, split-content, process, faq, cta
Patterns
feature-grid, split-content, faq-list, cta-banner
Components
card, badge, button, image
Image roles
banner, card, landscape

Accessibility: Use headings for service groups and keep CTAs distinct from navigational links.

directory template

Products Page Composition Guide

Create catalog discovery with filters, product cards, pricing, ratings, and pagination.

Route
products/
Data file
data/pages/products/
Sections
page-header, filter-toolbar, product-grid, pagination, cta
Patterns
section, cta-banner
Components
card, badge, button, form, image
Image roles
card, square, landscape

Accessibility: Filters must use labels and product images require useful alt text.

gallery template

Portfolio Page Composition Guide

Show work through categories, portfolio tiles, project summaries, and contact CTA.

Route
portfolio/
Data file
data/pages/portfolio/
Sections
page-header, category-tabs, portfolio-grid, featured-case-study, cta
Patterns
section, split-content, cta-banner
Components
card, label, image, button
Image roles
square, landscape, hero

Accessibility: Do not rely on visual tiles alone; provide project names and summaries.

contact template

Contact Page Composition Guide

Use the shared Forms system with contact cards, response expectations, and optional map placeholder.

Route
contact-us/
Data file
data/pages/contact-us/
Sections
page-header, contact-cards, form-panel, response-time, map-placeholder
Patterns
contact-panel, section
Components
form, input, textarea, select, button
Image roles
banner, background

Accessibility: Every input must have a label, errors must be announced, and required fields must be clear.

article-list template

Blog Page Composition Guide

Build an editorial index with featured article, article cards, search, and pagination.

Route
blog/
Data file
data/pages/blog/
Sections
page-header, featured-article, article-grid, search, pagination
Patterns
article-list, section
Components
card, label, image, form
Image roles
landscape, card, hero

Accessibility: Use article landmarks where appropriate and include publication metadata.

article template

Article Page Composition Guide

Compose long-form content with metadata, featured image, readable body, quotes, and related content.

Route
article/
Data file
data/pages/article/
Sections
article-header, featured-image, article-body, blockquote, related-content
Patterns
page-header, article-list
Components
heading, paragraph, blockquote, figure, image
Image roles
hero, landscape

Accessibility: Preserve heading order and provide captions for explanatory images.

utility template

404 Page Composition Guide

Help users recover with an empty state, search, and popular destinations.

Route
404/
Data file
data/pages/404/
Sections
empty-state, search, popular-links
Patterns
section
Components
empty-state, form, button, image
Image roles
image-not-found

Accessibility: Keep the recovery action obvious and return HTTP status 404.