Page Builder — Section Reference
The full catalog of sections available in Blog Post (Pages and Templates), grouped the same way as the Studio's Add section picker. For the general workflow (creating a page, publishing, templates), see docs/how-to-use-the-sanity-new-features.md.
Category-scoped types: several sections only appear in the picker for matching page categories (Article Header → Blog/Resources/Press/Updates/Gated Content; Webinar Registration Hero → Webinars; Case Study Hero/Story → Case Studies; Resource Hero → Gated Content; Recording Hero → Webinars/Thank you; Card Presentation → Blog/Resources/Press/Updates/Webinars/Events/Case Studies/Gated Content). Policy lives in src/lib/sections/registry.ts (pickerCategories) and src/lib/sections/sectionPicker.ts.
How to read this:
- Once per page? — sections marked Yes can only be added once. Adding a
second one blocks Publish. See *Conversion conflicts* below for a related rule that spans several sections.
- Skipped when — the exact condition under which a section quietly won't
appear on the live page, even though it's saved in the Studio. This is intentional (see *Why sections disappear* in the main guide) — nothing else on the page is affected.
Hero
| Section | Once per page? | What it's for | Skipped when |
|---|---|---|---|
| Hero | Yes | The page opener — optional eyebrow, headline, subtitle, up to two buttons, optional image. | Title is empty. |
| Homepage Hero | Yes | Full-viewport landing hero with skip-to pills, headline, subhead, up to two CTAs, and an optional background photo. Claims the same hero slot as Hero. | Headline is empty. |
| Webinar Registration Hero | Yes | Header + copy for a webinar landing page — kicker, optional title override, subtitle, description, up to two hosts. Pair with Countdown and a form section for the registration itself. | No title override and the page itself has no title. |
| Case Study Hero | Yes | Company name/logo, a summary, and a hero image, in one of two layouts. | The page itself has no title. |
Content
Field-by-field detail and a "which one do I want" guide for this group are in docs/marketing-content-sections-guide.md — reproduced in summary here.
| Section | Once per page? | What it's for | Skipped when |
|---|---|---|---|
| Rich Text | No | Paragraphs, headings, lists, links, quotes — the general-purpose prose block. Optional Padding top / Padding bottom (Default, None, Compact, or Custom px) tighten gaps when stacked with Content Image or another Rich Text block. | No body text and no heading. |
| Feature Grid | No | 2–8 features in a grid, each with an icon or image, title, description, optional link. Three features sit on one row. The text strip shows an icon or image when you set one. | No valid features remain (each needs at least a title). |
| Split Content Panels | No | Intro copy, a feature panel, and a quote panel. Every line is optional. | No intro, feature, or quote copy remains. |
| Interactive Demo Cards | No | Clickable product demos. Edit the headline, labels, and sample rows. The click animation stays the same. | No cards remain. |
| Tabbed Feature Carousel | No | Auto-advancing tabs, plus an optional quote. A blank line in a tab’s text starts a new paragraph. | No tabs remain. |
| Feature Callout | No | One claim with supporting points and a single button. Narrower than Feature Grid. | Heading is empty. |
| FAQ | No | Expandable question/answer list. Answers support rich text. | No valid question/answer pairs. |
| Process Steps | No | Numbered steps in a row, each with a large ghosted numeral. | Step count is outside the allowed range. |
| Feature Rows | No | Title left, description right, divided by hairlines. Text only — see *Feature Rows with Images* under Media for the image version. | No valid rows. |
| Related Content | No | A row of cards linking to blog posts or case studies you choose. Titles and images stay in sync automatically if the source post changes. | None of the chosen items could be resolved (e.g. the source post was deleted). |
| Audience Cards | No | Image cards for the segments you serve, each linking to its own page. Bullets optional. | Card count is outside the allowed range. |
| Link List | No | A vertical list of links with chevrons. Good for resource indexes or open roles. Optional In-page anchor for /company#careers on the jobs list. | No items have a valid link. |
| Icon Cards | No | Icon + title + description cards, each with an optional link. Icons come from an approved set — no custom icon uploads. | Card count is outside the allowed range. |
| Bullet Columns | No | Two or more labelled bullet lists side by side — e.g. capabilities vs. outcomes. | Column count is outside the allowed range. |
| Pillar Grid | No | A grid of title + description cards, no icons. Good for summarising themes. | Item count is outside the allowed range. |
| Comparison Table | No | A hand-written table. Cells take plain text or a Yes/No/Partial marker. | No columns, or no rows. |
| Compliance Showcase | No | Two-column compliance story with feature rows. Partner logos and the navy vector band come from Studio fields — logos stay off unless Show partner logos is on. | Heading, intro, or feature rows missing. |
| CBP Quote | No | Dark navy blockquote with attribution, optional link, mandate bullets, and optional seal image. | Quote or attribution is empty. |
| Vision Showcase | No | Vision items, pull quote, and optional decorative product panel. | Heading or vision items missing. |
| Closing Statement | No | Large closing headline (homepage-style). | Heading is empty. |
| Pricing Plans | Yes | Broker and importer tier cards plus a feature comparison for /pricing. Plan names, prices, and credits load from the billing API. Edit bullets, catalog labels, Enterprise copy, and both comparison tables in Studio. Hero and FAQ on /pricing are separate sections. | Enterprise card is incomplete. |
| Filterable Cards | No | A card grid with category filter pills. Filtering happens in the visitor's browser — every card is still present in the page, just hidden. | Card count is outside the allowed range. |
| Article Header | Yes | Header + opening paragraph — optional category kicker, optional title override, byline (from the page's own Author/Published date), and the lead paragraph. Counts as a Hero — see above. | No title override and the page itself has no title. |
| Resource Hero | Yes | Header for a Gated Content detail page — label, byline, and a hero image; falls back to a bordered title block when there's no image. Counts as a Hero — see above. | The page itself has no title. |
| Case Study Story | No | One titled block of case-study story copy with an optional pull quote. Add several to build the full narrative. | Title is empty, or there are no paragraphs. |
| Team Directory | Yes | Headshot grid with a profile drawer. Name, title, photo, image fit, and bio are editable per person. | No people remain with a name, title, and profile copy. |
Media
Full details on every image field (alt text, sizing, aspect ratio) are in docs/marketing-image-sections-guide.md — reproduced in summary here.
| Section | Once per page? | What it's for | Skipped when |
|---|---|---|---|
| Video | No | One embedded video. Paste a normal YouTube or Vimeo watch/share link — no embed code needed. | The link isn't a supported YouTube or Vimeo URL. |
| Media + Copy Row | No | Image on one side, copy on the other. Choose which side the image sits on. | Heading is empty. |
| Feature Rows with Images | No | A stack of feature rows, each with its own image and crop position. | No valid rows remain (each needs a title and description). |
| Full-Bleed Image Band | No | One image spanning the full browser width — ignores the page's normal side margins. Optional fade into the section below. Natural height (navy) keeps the image's aspect ratio on a navy band (vector strips). | Image is missing, or the file couldn't be processed. |
| Content Image | No | One inset image using normal page margins — natural height, optional caption. Article width aligns with blog/article copy; Wide uses the full width inside the gutters. Same optional Padding top / Padding bottom controls as Rich Text (defaults are smaller than Rich Text). | Image is missing, or the file couldn't be processed. |
| Image Gallery | No | A grid of images with optional captions. Requires at least 2 images. | Fewer than the minimum number of images. |
| Recording Hero | Yes | Header for a "watch this recording" page (Thank-You or Webinar on-demand) — kicker, optional title override, recorded date/duration, and either a video embed or a cover image. | No title override and the page itself has no title. |
| Team Stories | Yes | Horizontal Mux interview strip. Paste a player.mux.com link per clip; optional poster timestamp and quote. | No valid Mux interviews remain. |
| CBP Conveyor | Yes | Motion lockup of CBP risk segmentation. No copy — Case Studies picker only. | — |
| Responsible Innovation | Yes | Animated Tru Risk Framework and Compliance Graph lockup. Heading, intro, and both panel titles/bodies are editable in Studio. | Any of the six copy fields is empty. |
Social proof
| Section | Once per page? | What it's for | Skipped when |
|---|---|---|---|
| Stats | No | 2–4 headline numbers. *Tiles* = green cards, *Plain* = plain type on light background. | Stat count is outside the allowed range. |
| Testimonial | No | One customer quote with attribution, plus optional logo or portrait. | Quote or name is missing. |
| Team Quotes Carousel | Yes | Why-we-joined style quote carousel with a portrait per person. | No quotes with a name remain. |
| Logo Bar | Yes | 1–12 logos. Standard — label above, page background. Partner strip — homepage cream band (no visible label). Inline export — label, divider, logos, suffix (brokers filing systems). | No valid logos remain; inline export needs a label. |
Conversion
See Conversion conflicts below — most of these sections compete for the same "one primary ask per page" slot.
| Section | Once per page? | What it's for | Skipped when |
|---|---|---|---|
| Gated Form + Hero | Yes | Headline + copy on the left, a HubSpot form on the right. The shape used by contact/campaign landing pages. Counts as *both* a Hero and a primary conversion — see below. | Required content is missing, or the chosen HubSpot form is invalid, deprecated, or not approved for this section. |
| HubSpot Form | Yes | A standalone form band at reading width. Lighter-weight than the gated hero — good mid-page or as a footer capture. | Same as above. |
| Resource Download | Yes | Gated asset: a button reveals the form, then the download link. Needs both a form and a file URL. | HubSpot form invalid, or download URL is missing. |
| Contact Form | Yes | Tru's own lead form — fixed fields, reCAPTCHA-protected, submitted through /api/contact to Zapier. Only the surrounding copy is editable. | — (No HubSpot record or form ID is required.) |
| Newsletter Signup | Yes | Picks a Newsletter Signup config (from the Newsletter Signups list) — its own form, copy, and layout (band or sidebar card). Until that config has a valid HubSpot form, the platform email field stays visible. Low-intent — may sit alongside a main conversion form on the same page. | No config is picked (required field), or the picked config no longer resolves (unpublished/dangling reference) — the section is omitted rather than shown blank. |
| Related Resource Card | No | A small sidebar-style card linking to one Gated Content page or Webinar (registration or recording), with optional title/subtitle overrides. Stack several to build a sidebar. Does not count toward the primary-conversion limit. | The chosen resource is missing, unpublished, or has no slug. |
| CTA Band | No | One or two buttons, heading optional. Lighter than Conversion Panel, which always needs copy. Alignment: centered, left, or offset (starts at column 2 of a 3-column grid). | No buttons have a valid link. |
| Conversion Panel | No | Dark, full-width call-to-action band. Use near the end of a page. Secondary button is optional. Optional In-page anchor (for /company#careers). | Heading is empty. |
| Countdown | Yes | A live countdown to a date/time. Duration (for example "45 min"), eyebrow, heading, background, and the message after the date passes all show on the page. On a webinar, the display timezone formats the When line. | Target date is missing or unparseable. |
| Booking Calendar | Yes | An inline Cal.com booking widget. Choose from a fixed list of approved meeting types — you can't paste an arbitrary link. | — |
Conversion conflicts
A page can have only one primary conversion ask, even across different section types. Gated Form + Hero, HubSpot Form, Resource Download, Contact Form, and Booking Calendar all compete for that one slot — mixing any two of them on the same page blocks Publish.
Newsletter Signup does not count — it's treated as a secondary, low-intent ask and can sit alongside one of the above.
If a page genuinely needs two competing conversion asks (e.g. a long page with a mid-page form and a separate footer form), turn on Allow multiple conversions in the page's Advanced tab. This does not relax the Hero limit or the Gated Form's Hero-slot usage.
Layout
| Section | Once per page? | What it's for | Skipped when |
|---|---|---|---|
| Texture Strip | No | A short decorative band to break up a long page. No text — purely visual. | — |
| Custom HTML | No | Trusted raw HTML and JavaScript inside a brand-coloured band. For third-party widgets or one-off embeds that cannot be built from other sections. | Both HTML and JavaScript fields are empty. |
| Sticky Two-Column | Yes | Two columns of *other* sections, where one column stays fixed on screen while the other scrolls past it. Choose which side sticks. | Both columns are empty. |
| Card Presentation | Yes | Not a visual section — controls how this page appears as a card on OTHER pages' listings (the blog listing, related-content rows, the case-studies grid, the upcoming-webinar card): featured image, card type (photo/halftone/stat/text-hero), colors, and (for a Case Study) its one listing stat. | Always — it never renders anything on this page's own body. |
The Sticky Two-Column section is a container — you add other sections inside its two columns rather than typing content directly into it. It cannot contain another Sticky Two-Column inside itself.
Nested sections use .nested-section-column (src/app/globals.css) so horizontal gutters are not doubled against the container's px-section. The renderer passes embedded={true} to heroes, forms, rich text, and countdown sections inside that layout. Shared band helpers live in src/lib/sections/sectionShell.ts.
Optional links and buttons
Feature links and standalone CTA fields can be omitted or cleared entirely. Once you add a label or destination, complete the link type and its destination. External URLs must use HTTP or HTTPS. Internal paths cannot start with //. Labels are limited to 255 characters. Hero and CTA Band button entries, and Link List links, must always be complete; remove an unused array entry instead of leaving it blank.
Feature Grid uses one column below 36rem of available content width and two from 36rem. Counts 3, 5 and 6 use three columns from 56rem; counts 4, 7 and 8 use four columns from 64rem. Two items remain in two columns. These thresholds measure the section's own container, so a narrow Sticky Two-Column main area can intentionally show three features as 2 + 1 to preserve readable cards; a narrow sidebar may show one column. GTM does not need to set a column count.
Logo Bar preserves logo order, alt text and semantic sizes. Below 1280px, groups of three or more scroll automatically in a compact row. With reduced motion enabled, animation stops and the row can be scrolled horizontally instead.
Forms and third-party content
HubSpot forms (Gated Form + Hero, HubSpot Form, Resource Download): choose Pick a saved form to select from your team's registered forms by name, or Paste a form ID to use one directly from HubSpot — the same way you already do for blog sidebar forms. Both work; picking a saved form is preferred when the form you need is already registered.
Contact Form uses Tru's fixed native form and /api/contact, rather than a HubSpot embed. Engineering manages its fields, validation, reCAPTCHA and Zapier delivery. GTM edits the heading and surrounding copy in Sanity.
Booking Calendar: only offers a fixed list of approved meeting types. If the meeting type you need isn't listed, ask engineering to add it — links can't be pasted in freely here, by design.
Adding a new section type
If none of the above fits what a page needs, ask engineering. New sections are a defined, repeatable process (see the *For developers* section in docs/how-to-use-the-sanity-new-features.md) — it's not a one-off hack, so it's reasonable to ask for one when there's a real recurring need.