Section types

The page builder draws from a fixed menu of 21 section types — each one a Sanity object schema paired with an Astro component — and this page is the catalog of what every type does and the behavior worth knowing before you reach for it.

If you want the dispatch mechanics (fetch → SectionRenderer → _type switch) or how a section joins the scroll-in cascade, see Page builder. If you want the step-by-step recipe for wiring a brand-new type, see Adding a section. This page stays focused on the what: one row per section, plus the gotchas that bite.

The mental model

Every section is a defineType({type: 'object', name: '<name>Section', …}) in studio/schemaTypes/sections/, registered once in registry.ts as a defineArrayMember. That single sectionMembers list is the source of truth for which types editors can drop into a sections[] array, and it flows into every page-builder consumer: homepage.sections[], page.sections[], service.sections[], portfolioPost.sections[], and the two index singletons' sectionsBelow[].

Schema names are camelCase with a Section suffix (heroSection, faqSection); the short labels in this catalog (hero, faq) are just the prefix. Each name maps 1:1 to a *Section.astro component in website/src/components/sections/ and a discriminated-union variant in website/src/sanity/types.ts.

A few cross-cutting traits show up repeatedly in the catalog below:

• Reference fallback — sections that hold arrays of references (work, logoWall, testimonials) auto-fall-back to featured/recent documents when the editor leaves the picks empty. The fallback is resolved in the website's GROQ projections, not in the schema.
• Explorer fallback — the two explorer sections pull their items from the shared explorerService doc list; empty picks show all items by order.
• Embed / raw-HTML mode — codeBlock and cta (in embed mode) render pasted markup verbatim, including <script> tags. Trusted sources only.
• Auto-fetch — serviceGrid and psiScores ignore manual content entirely; their data comes from published docs / a weekly cron.
• *asterisk* accents — most headline fields wrap accent words in *asterisks*, rendered gold on dark surfaces, forest-green on cream. Heroes and cta are the exceptions (they carry their own accent mechanics).

The catalog

The list below is in registry order. Each entry gives the schema name, the Studio title, the one-line purpose from the schema's own description, and notable behavior.

Variants & modes worth knowing

richText layout variants

richTextSection.variant is a three-way picker that changes only the prose treatment:

options: {
  list: [
    {title: 'Prose (centered)', value: 'prose'},
    {title: 'TOC sidebar', value: 'tocSidebar'},
    {title: 'Editorial (lede)', value: 'editorial'},
  ],
}

• Prose — centered ~65ch column (default).
• TOC sidebar — sticky table-of-contents auto-built from the body's H2s.
• Editorial — wider column with a display-font lede paragraph.

cta two-column + embed modes

ctaSection starts as a centered single column. Toggle twoColumnLayout to put the heading/body/CTA on the left and reveal an aside on the right. The aside then has two modes via embedMode:

• Off — info-rows table + email button.
• On — a raw HTML/JS form embed (HubSpot, Tally, etc.), rendered as-is.

A custom validation rule warns when embed mode is on but no embed code is pasted, so the aside doesn't silently render empty:

if (parent?.twoColumnLayout && parent?.embedMode && !value) {
  return 'Embed mode is on but no embed code is pasted — the aside will render empty.'
}

contentImage comparison slider

contentImageSection mixes in the shared comparisonFields() factory. When comparisonEnable is on, the single image field is hidden and a before/after slider takes its place:

hidden: ({parent}) => parent?.comparisonEnable === true,

Both comparison images must be present before the website renders the slider. The same comparisonFields() factory is reused by stickyScrollSection, where each pinned group can be a single image or a comparison module.

Reference fallbacks

Three sections accept reference arrays and fall back when the picks are empty:

This makes featured: true on client and testimonial docs load-bearing — it's what drives the no-pick fallback. The fallback lists are resolved in website/src/sanity/queries/projections.ts (featuredClientsProjection, featuredTestimonialsProjection, recentCaseStudiesProjection) and passed into SectionRenderer as the clients / testimonials / caseStudies props. See Querying content.

Explorer item resolution

heroExplorerSection and servicesExplorerSection both pull from the canonical explorerService doc list ("Service Explorer" in Studio). Their services array is optional manual picks:

Leave empty to show all Service Explorer items by their order.

Each item's chip/accordion label, description, and image live on the explorerService document, not on the section. In servicesExplorer, the first item is open by default and drives the left image.

Gotchas

HubSpot query-param contract (both explorers)

When a visitor selects chips/services, the explorer CTA appends them to its destination URL as a semicolon-separated multi-checkbox value:

/contact?interested_services=web-design;seo

The queryParam field (default interested_services) must equal the internal name of the HubSpot form's multi-checkbox property for pre-fill to work, and each value must match an explorerService value slug / HubSpot property option. See HubSpot & lead capture.

Heading accent authoring

Most headline fields use *asterisks* for accent words (rendered gold on dark, forest-green on cream by the website's renderAccentHeading helper). The exceptions author accents differently and must stay that way:

• heroSection / heroExplorerSection — inline HTML spans (text-forest, heading-underline) tied to the GSAP headline contract.
• ctaSection — a separate headingHighlight field rendered with the gold underline.

See Typography and Design tokens for the accent color system.

Adding to the catalog

Adding a new section type touches both packages and the registry is the hinge. In short: create the *Section.astro component + Studio schema, register it in index.ts and registry.ts, add a case branch to SectionRenderer.astro, and append a variant to SectionData in website/src/sanity/types.ts. A sectionTypes.test.ts enforces the three-way contract (registry ↔ renderer ↔ union) so a forgotten branch fails CI. The full checklist lives in Adding a section.

Where this lives

The page-builder pattern overview and the per-section anatomy notes also live in studio/CLAUDE.md ("Page-builder pattern") and website/CLAUDE.md ("Page-builder rendering flow").