# Section Patterns — Canonical Catalog

> Reusable section types that any design system in this library can render.
> The field contract (name, type, required) is universal; the visual rendering varies per design system (`sbc/`, `ps-edu/`, `ecosia-light/`).
>
> When the sprinkle pipeline builds a prospect's site, it picks which patterns each page uses, fills the fields from `config.json`, and the design system's CSS handles the visual treatment.

## How to read a pattern

- **Purpose:** what role this section plays in a page's rhetoric
- **When to use:** which page types it belongs on
- **Fields:** the schema. `{...}` denotes a nested object; `array of {...}` denotes a list of nested objects
- **Required:** `yes` = pipeline halts if missing; `no` = renders without if absent

---

## Hero patterns

### `hero-photo-led`
- **Purpose:** Top-of-homepage. Establishes mood with a real photo + short editorial headline.
- **When to use:** Homepage. Best when the org has strong photography.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `eyebrow` | string | no | Uppercase tracked label (e.g. "EAST VALLEY · EST. 1986") |
| `headline` | string | yes | 6–12 words, display serif/display sans |
| `lede` | string | no | 1 short paragraph |
| `cta_primary` | `{label, href}` | yes | Filled button |
| `cta_secondary` | `{label, href}` | no | Text + arrow style |
| `image` | `{src, alt}` | yes | 16:9 or full-bleed |

### `hero-centered`
- **Purpose:** Typography-only hero. No photo. Used on internal landings or high-statement homepages.
- **When to use:** "I'm New" landings, give pages, series announcements.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `eyebrow` | string | no | |
| `headline` | string | yes | |
| `lede` | string | no | |
| `cta_primary` | `{label, href}` | no | |

---

## Header / chrome patterns

### `announcement-bar`
- **Purpose:** Slim strip above main nav. One sentence + optional CTA.
- **When to use:** Time-sensitive moments (Christmas Eve service, capital campaign launch, weather closure).
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `text` | string | yes | 1 short sentence |
| `cta` | `{label, href}` | no | |

### `nav`
- **Purpose:** Primary site navigation.
- **When to use:** Every page.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `logo` | `{src, alt, href}` | yes | Usually links to `/` |
| `items` | `array of {label, href, children?}` | yes | `children` optional dropdown |
| `cta` | `{label, href}` | no | Right-aligned visit/give CTA |

---

## Body / content patterns

### `intro-statement`
- **Purpose:** Single editorial paragraph block. Often follows hero.
- **When to use:** Setting tone after hero. State the org's posture in 1–3 sentences.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `eyebrow` | string | no | |
| `prose` | string | yes | 1–3 sentences |

### `service-times`
- **Purpose:** Weekly worship schedule. Days, times, descriptions.
- **When to use:** Homepage + "I'm New" landing. Always near above-the-fold.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | "Sundays" or "Worship" |
| `schedule` | `array of {day, time, desc, divider_above?}` | yes | |
| `address_short` | string | no | Display under schedule |

### `ministries-grid`
- **Purpose:** Programs / ministries / departments rendered as cards.
- **When to use:** Dedicated landings, secondary homepage section.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | |
| `intro` | string | no | |
| `items` | `array of {name, desc, href?, icon?}` | yes | 4–9 items typical |

### `events-list`
- **Purpose:** Upcoming dates. Date + title + 1-line context.
- **When to use:** Homepage secondary, dedicated events page.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | |
| `items` | `array of {date, title, desc, href?}` | yes | 3–6 typical |

### `staff-profile`
- **Purpose:** Single leader bio with photo.
- **When to use:** About page, "I'm New" landing pastor section.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `name` | string | yes | |
| `role` | string | yes | "Senior Pastor" etc. |
| `photo` | `{src, alt}` | yes | |
| `bio` | string | yes | 1–3 paragraphs |
| `cta` | `{label, href}` | no | "Read more" link |

### `staff-grid`
- **Purpose:** Multiple staff/leaders as a grid.
- **When to use:** About page, leadership team landing.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | |
| `items` | `array of {name, role, photo, bio_short?}` | yes | 4–12 typical |

### `story-prose`
- **Purpose:** Long-form about/founding-story narrative.
- **When to use:** About page main body.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | |
| `prose` | string | yes | 2–6 paragraphs (markdown allowed) |
| `pullquote` | string | no | Highlight one line |

### `beliefs-list`
- **Purpose:** Doctrinal distinctives, values, or convictions enumerated.
- **When to use:** About page secondary, "What we believe" landing.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | |
| `intro` | string | no | |
| `items` | `array of {title, text}` | yes | 4–7 typical |

---

## Conversion patterns

### `cta-band`
- **Purpose:** Full-width call-to-action band between sections.
- **When to use:** Mid-page conversion moment. Once per page max.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | |
| `lede` | string | no | |
| `cta_primary` | `{label, href}` | yes | |
| `cta_secondary` | `{label, href}` | no | |

### `ways-to-give`
- **Purpose:** Donation methods as numbered/labeled options.
- **When to use:** Give page only.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | |
| `intro` | string | no | |
| `items` | `array of {label, desc, href?}` | yes | 3–5 typical (online, mail, planned, in-person) |
| `allocation` | `array of {percent, label, desc}` | no | Where the money goes |
| `tax_info` | `array of strings` | no | Bullet list of legal notes |

---

## Footer / closing patterns

### `closing-block`
- **Purpose:** Final editorial moment before footer. Often a reassurance or directive.
- **When to use:** Bottom of homepage and landings.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | |
| `prose` | string | no | 1–2 sentences |
| `phone_line` | string | no | "Call us at (xxx) xxx-xxxx" |

### `footer`
- **Purpose:** Site-wide footer.
- **When to use:** Every page.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `address` | `{street, city, state, zip}` | yes | |
| `phone` | string | yes | |
| `email` | string | no | |
| `nav_groups` | `array of {heading, items: [{label, href}]}` | no | Up to 4 columns |
| `denom_tag` | string | no | Affiliation line |
| `year` | number | yes | Copyright year |

---

## Generic content blocks

These are page-builder-style blocks that apply to any vertical (church, nonprofit, higher-ed, B2B). Most are static HTML/CSS; the interactive ones (`accordion-*`, `tab-*`, `slider-*`) ship with vanilla JS.

### `image-right-text-left`
- **Purpose:** Two-column row — text left, image right. Most common editorial-section layout.
- **When to use:** Mid-page narrative beats. Pair with `image-left-text-right` to create visual rhythm.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `eyebrow` | string | no | |
| `heading` | string | yes | |
| `prose` | string | yes | 1–3 paragraphs |
| `cta` | `{label, href}` | no | |
| `image` | `{src, alt, caption?}` | yes | Aspect 4:3 or 3:2 typical |

### `image-left-text-right`
- **Purpose:** Flipped variant of above — image left, text right.
- **Fields:** identical to `image-right-text-left`.

### `faq-section`
- **Purpose:** Frequently asked questions — accordion-style or expanded list.
- **When to use:** Give pages, help/about pages, getting-started landings.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | |
| `intro` | string | no | |
| `items` | `array of {question, answer}` | yes | 4–10 typical |
| `cta` | `{label, href}` | no | "Still have questions? →" |

### `three-card`
- **Purpose:** Three equal cards in a row — the canonical "value props" section.
- **When to use:** Homepage secondary, value-prop blocks, top of any landing page.
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | |
| `intro` | string | no | |
| `items` | `array of {icon?, title, desc, cta?}` | yes | Exactly 3 items |

### `accordion-v1` (list-style)
- **Purpose:** Collapsible content list — full-width rows with hairline dividers.
- **When to use:** Long-form FAQs, policy lists, programs catalogs where each item is text-heavy.
- **Interactive:** Yes — single-open or multi-open mode.
- **CSS hook:** `.block-accordion.v1`
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | |
| `intro` | string | no | |
| `items` | `array of {heading, body}` | yes | Body can be markdown |
| `mode` | `"single" \| "multi"` | no | Default `single` (only one open at a time) |

### `accordion-v2` (card-style)
- **Purpose:** Collapsible cards — each item in its own bordered card with hover lift.
- **When to use:** Visually segmented FAQs, where each item carries more weight.
- **Interactive:** Yes.
- **CSS hook:** `.block-accordion.v2`
- **Fields:** identical to `accordion-v1`.

### `tab-section-v1` (horizontal tabs)
- **Purpose:** Horizontal tabs across the top, content panels below.
- **When to use:** "By audience" content (parents/students/donors), comparison sections, alternating program info.
- **Interactive:** Yes — JS swaps active tab + panel.
- **CSS hook:** `.block-tabs.v1`
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | yes | |
| `intro` | string | no | |
| `items` | `array of {label, content}` | yes | 3–5 typical. `content` can include heading, prose, image |
| `default_index` | number | no | Default 0 (first tab) |

### `tab-section-v2` (vertical tabs)
- **Purpose:** Vertical tabs on the left, content panel on the right.
- **When to use:** Long-form content where each tab is an extended section (programs detail, doctrinal positions).
- **Interactive:** Yes.
- **CSS hook:** `.block-tabs.v2`
- **Fields:** identical to `tab-section-v1`.

### `slider-v1` (image gallery)
- **Purpose:** Image carousel with arrow nav + dot indicators.
- **When to use:** Photography showcase, ministry/program photos, event recaps.
- **Interactive:** Yes — arrow buttons + dot indicators + swipe.
- **CSS hook:** `.block-slider.v1`
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | no | |
| `items` | `array of {image, caption?, alt}` | yes | 3–8 typical |
| `autoplay` | boolean | no | Default false |

### `slider-v2` (testimonial slider)
- **Purpose:** Quote/testimonial carousel — quote, attribution, optional photo per slide.
- **When to use:** Member stories, alumni/donor testimonials, member-of-the-month features.
- **Interactive:** Yes — dot indicators (no arrows for cleaner editorial feel).
- **CSS hook:** `.block-slider.v2`
- **Fields:**

| Field | Type | Required | Notes |
|---|---|---|---|
| `heading` | string | no | |
| `items` | `array of {quote, attribution, role?, photo?}` | yes | 3–6 typical |

---

## Pattern usage by page type

Suggested defaults — actual prospect config can override:

| Page | Typical patterns |
|---|---|
| **homepage** | `nav` → `hero-photo-led` → `intro-statement` → `service-times` → `ministries-grid` → `events-list` → `cta-band` → `closing-block` → `footer` |
| **i'm-new** | `nav` → `hero-centered` → `intro-statement` → `service-times` → `staff-profile` → `cta-band` → `footer` |
| **series / program** | `nav` → `hero-photo-led` → `intro-statement` → `events-list` → `cta-band` → `footer` |
| **give** | `nav` → `hero-centered` → `intro-statement` → `ways-to-give` → `closing-block` → `footer` |
| **about** | `nav` → `hero-centered` → `story-prose` → `beliefs-list` → `staff-profile` → `cta-band` → `footer` |

---

## How design systems implement these

Each DS in this library implements its own visual treatment of every pattern above. Cross-reference:

| Pattern | sbc/ | ps-edu/ | ecosia-light/ |
|---|---|---|---|
| All patterns | See `homepage.html`, `landing-1-im-new.html`, `landing-2-series.html`, `landing-3-give.html`, and the kitchen-sink at `design-system.html` | Same | Same |

When adding a new design system, the rule is: **implement every pattern in the catalog** so the sprinkle pipeline can render any prospect against any DS.

---

## Signature Patterns (DS-specific extensions)

In addition to the canonical patterns above, each DS may add **signature patterns** that only it implements. The sprinkle pipeline calls them by name; if a prospect's config requests a signature pattern that the chosen DS doesn't have, the pipeline falls back to the closest canonical equivalent (or skips).

### sbc/
| Pattern | Purpose | Detail |
|---|---|---|
| `wayfinding-photo` | Photo with arrow-overlay graphic for "here's where to find us" | See `sbc/brand-spec.md` |
| `vertical-rule-divider` | 1px navy vertical line as section break (50px or 300px) | See `sbc/brand-spec.md` |

### ps-edu/
| Pattern | Purpose | Detail |
|---|---|---|
| `scripture-pullquote` | Verse in serif italic with warm-tan left rule | See `ps-edu/brand-spec.md` |
| `editorial-listing` | Scholarly catalog: orange top-rule + sans eyebrow + serif body per item | See `ps-edu/brand-spec.md` |
| `top-accent-rule` | 56×3px orange rule above section eyebrows (decorative) | See `ps-edu/brand-spec.md` |

### ecosia-light/
| Pattern | Purpose | Detail |
|---|---|---|
| `impact-stats` | Big chunky brand-green number + uppercase label + support line | See `ecosia-light/brand-spec.md` |
| `action-steps` | Numbered green-pill steps for action-forward CTAs | See `ecosia-light/brand-spec.md` |
| `caption-pill-photo` | Editorial photo with green pill caption overlay | See `ecosia-light/brand-spec.md` |

### Fallback rules

When a prospect requests a signature pattern not in the chosen DS:
1. Pipeline checks if a canonical pattern fits (e.g. `impact-stats` → fallback to `intro-statement` with the headline as the number)
2. If no fit, skip with a render-time warning
3. Signature patterns are opt-in — they only fire if explicitly listed in the prospect's `config.json`