---
title: "Building Websites with Modules That Convert"
description: "A deep dive into all 17 SanityPress modules—what they do, how to use them, and how to stack them for high-converting pages."
---

![Building Websites with Modules That Convert](https://cdn.sanity.io/images/cyu7k2r0/production/f4d3d02b7598fab1d02402ae3e66a929b66a5f17-1448x1086.png?rect=0,0,1448,890&blur=30&q=100&auto=format)

# Building Websites with Modules That Convert

![Mitchell Christ](https://cdn.sanity.io/images/cyu7k2r0/production/26bddd620298806d202e516a4078eab89dc8117a-1254x1254.png?q=100&auto=format)

By Mitchell Christ

* [Marketing](https://sanitypress.dev/blog?category=marketing),
* [Web Dev](https://sanitypress.dev/blog?category=web-dev)
May 25, 202610 min read

On this page
1. [What Is a Module?](#what-is-a-module)
2. [Content Modules](#content-modules)
3. [Hero (cover)](#hero-cover)
4. [Hero (split)](#hero-split)
5. [Card List](#card-list)
6. [Callout](#callout)
7. [Prose](#prose)
8. [Accordion List](#accordion-list)
9. [Stat List](#stat-list)
10. [Step List](#step-list)
11. [Quote List](#quote-list)
12. [Logo List](#logo-list)
13. [Person List](#person-list)
14. [Utility Modules](#utility-modules)
15. [Breadcrumbs](#breadcrumbs)
16. [Custom HTML](#custom-html)
17. [Form Module](#form-module)
18. [Search Module](#search-module)
19. [Blog Modules](#blog-modules)
20. [Blog Index](#blog-index)
21. [Blog Post List](#blog-post-list)
22. [Blog Post Content](#blog-post-content)
23. [Building a High-Converting Landing Page](#building-a-high-converting-landing-page)
24. [The Prompt](#the-prompt)
25. [What's Next](#whats-next)

### Ready to build your next website with SanityPress?

[🚀 Get started today](https://sanitypress.dev/docs/getting-started)

![layered brand storytelling collage of hip product merchandise (hoodies, baseball caps, stickers, keyboard, mice, nintendo switch, backpack, tech gear, etc) with the logo "SanityPress", white on black color scheme](https://cdn.sanity.io/images/cyu7k2r0/production/f4d3d02b7598fab1d02402ae3e66a929b66a5f17-1448x1086.png?rect=0,0,1448,904&q=100&auto=format)

If you've ever set up a Next.js + Sanity integration from scratch, you know it's not hard—until it is. Connecting the CMS, setting up schemas, writing GROQ queries, wiring up TypeScript types, building page rendering logic… it adds up fast. That's exactly the problem SanityPress solves.

_This is exactly the problem SanityPress solves._

SanityPress is an open-source Next.js 16 + Sanity CMS starter template built and maintained by a Senior Developer at a digital marketing agency in California. Over the past three-plus years—with roots going back to 2021—it's been the engine behind 30+ shipped projects across industries: ecommerce, corporate, SaaS, and beyond. Multi-page sites with 10+ pages and full blog setups, shipped in days and weeks at agency pace.

The core idea is simple: **stop reinventing the foundation**. SanityPress handles the boilerplate—TypeScript, TypeGen, Visual Editing, App Router, page rendering—so you can focus on building for your client.

At the heart of that foundation is the **module system**.

## What Is a Module?

In SanityPress, a module is a page section. A page is just a stack of modules. That’s it.

Every module is two things at once: a Sanity schema object (what editors see in the Studio) and a React component (what renders on the frontend). Add a module to a page in the Studio, save, and it appears on the site. No code changes required.

This model is deceptively powerful. It keeps the codebase organized, makes pages easy for non-technical editors to manage, and scales naturally as sites grow. It's also increasingly well-suited for AI-assisted content generation. You can describe a page in plain language, and an agent can create or populate it using the Sanity MCP.

SanityPress ships with **17 production-tested modules** across three groups.

## Content Modules

These are the workhorses. They handle the majority of what you see on any given page.

### Hero (cover)

![Hero (cover) module](https://cdn.sanity.io/images/cyu7k2r0/production/f6135b63c7667275a7c06625af54290acce25c30-2122x1209.png?q=100&auto=format)

The `hero.cover` module is the full-bleed counterpart to `hero.split`. Instead of dividing the viewport, it lets a single background image fill the entire section while the eyebrow, headline, copy, and CTA sit layered on top. Reach for it when you have one striking visual that can carry the whole section on its own, like a product photo, brand shot, or atmospheric render.

A few built-in controls keep the overlaid text readable over any image. You can set the vertical and horizontal alignment of the content, dial in an image `opacity` value, and even supply a separate mobile crop. That makes it a strong choice for bold, image-led page openers where the visual is the message.

### Hero (split)

![Hero (split) module](https://cdn.sanity.io/images/cyu7k2r0/production/0f103b02c7a2622df55ff0b4b959a7e76a2cc297-2560x1322.png?rect=6,73,2530,1185&q=100&auto=format)

The `hero.split` module is your page's first impression. As the name suggests, it splits the viewport—copy on one side, an image or graphic on the other. The emphasis is deliberately on the asset: this is the right module when you have a strong screenshot, product render, or video to pair with your headline.

One pattern that works especially well: stack two or three hero modules vertically on the same page, each with a different `theme` to create visual contrast between sections. It’s an efficient way to showcase multiple product features without building a carousel or writing custom layout code.

### Card List

![Card list module](https://cdn.sanity.io/images/cyu7k2r0/production/d95f90bd8d90ee5cdbc2d7a95c05afef5bf1896c-2560x596.png?rect=7,92,2532,483&q=100&auto=format)

`card-list` is one of the most versatile modules in the system. At its most common, it's the go-to for unique value propositions (UVPs)—use icons paired with short copy to communicate your brand's differentiators at a glance.

But it goes further. Give each card an image and it becomes a resource grid for white papers, case studies, or editorial content. Add a touch of CSS (`grid-column: span 2`) and individual cards expand into a bento box layout—great for feature-heavy marketing pages that need visual hierarchy.

### Callout

![Callout module](https://cdn.sanity.io/images/cyu7k2r0/production/0c7dfd30dc428eb4dd22ab1c08eb19b954a99ecf-2560x468.png?rect=146,92,2280,349&q=100&auto=format)

`callout` is the conversion module. It belongs at the bottom of almost every page, with the CTA front and center. Think of it as the "so what do you want me to do next?" moment for your visitor.

It's also useful mid-page on long scrollers—place a callout between other modules and wire its CTA as a jump link down to a form at the bottom of the page. A field worth adding to your own implementation: bgImage, for a background image or pattern that helps this section visually pop against the surrounding content.

### Prose

![Prose module](https://cdn.sanity.io/images/cyu7k2r0/production/6017e56a767b7235da278ec20d5ebc7ea837a521-2546x1558.png?q=100&auto=format)

Got long copy? Use `prose`. This is the rich-text module, built on Sanity's Portable Text, and it includes a few extras that make it particularly useful for content-heavy pages.

The standout feature is an optional table of contents with automatic heading detection—toggle it on and it floats left or right of the content. Pair that with inline images, code blocks, and custom HTML support, and prose becomes the right module for documentation pages, terms and privacy pages, or any page where the writing is the product.

### Accordion List

![Accordion list module](https://cdn.sanity.io/images/cyu7k2r0/production/7dd736b6f7f6866fd9a2de8fe316fb6885a203f2-2560x1068.png?rect=163,85,2278,961&q=100&auto=format)

FAQ sections are `accordion-list`'s home turf, but it works anywhere you want to progressively reveal content. The exclusive option ensures only one item can be open at a time—useful for focused reading flows.

The most valuable under-the-hood feature: a toggle for schema.org FAQ markup. When Google parses that markup, your questions can appear directly in search results as expandable rich snippets—a meaningful SEO win for landing pages.

### Stat List

![Stat list module](https://cdn.sanity.io/images/cyu7k2r0/production/94c60fdaa0cfddfd8fec8c60ab25b723f3ec3895-2560x460.png?rect=81,70,2402,375&q=100&auto=format)

Numbers build trust faster than words. `stat-list` puts key metrics front and center—years in business, sites shipped, customers served, whatever tells your story best.

The structure is simple: a value, an optional suffix, and a short label. Stack three or four stats in a row and you have a trust signal that works at a glance. Real data resonates. Users want to see the numbers.

### Step List

![Step list modue](https://cdn.sanity.io/images/cyu7k2r0/production/310e51748a70170320f0a7043adba8aaeb9c8060-2560x848.png?rect=20,78,2481,744&q=100&auto=format)

Sequential flows—onboarding steps, "how it works" sections, setup guides—belong in `step-list`. The "easy as 1-2-3" pattern is one of the most reliable conversion elements on any landing page.

Like `accordion-list`, it comes with a schema.org markup toggle—this time for How-To structured data. When enabled, your step-by-step instructions can surface in Google's rich results, increasing visibility in search.

### Quote List

![Quote list module](https://cdn.sanity.io/images/cyu7k2r0/production/88b1f3bab5106871b5f755804ce51ff2f57520fe-2560x816.png?rect=23,92,2511,668&q=100&auto=format)

Social proof is one of the strongest forces in marketing. `quote-list` renders testimonials with attribution—a face, a name, a quote. That combination of a real person endorsing your product resonates with visitors in a way that feature lists never quite do.

Testimonials are stored as a shared document type, reusable across multiple pages without duplicating content. Update a testimonial once, and it updates everywhere it appears.

### Logo List

![Logo list module](https://cdn.sanity.io/images/cyu7k2r0/production/1d682f8809ef7ee91d65db9d13379c515d7a103b-2560x416.png?rect=157,73,2246,327&q=100&auto=format)

"Trusted by," "As seen on," "Our clients"—logo-list handles all of these patterns. A row of recognizable brand logos communicates credibility in under a second.

When you have a large number of logos to show, turn on autoScroll for a continuously scrolling marquee effect. It keeps the section visually dynamic and ensures every logo gets equal screen time.

### Person List

![Person list module](https://cdn.sanity.io/images/cyu7k2r0/production/dfbba9602e895cfe0eb5c0e83569203d9d61d2d5-2560x1224.png?rect=25,86,2507,1092&q=100&auto=format)

The team page module. `person-list` renders a grid of people with name, title, and photo by default—enough for most "About" or "Leadership" pages. The schema is easy to extend: add a bio field, social links, or a department grouping as your client's needs dictate.

## Utility Modules

These four modules aren't the stars of the page, but they punch above their weight in functionality and SEO value.

### Breadcrumbs

![Breadcrumbs module](https://cdn.sanity.io/images/cyu7k2r0/production/6ae52d92d2879c28331fb355a55f9fcec87e2066-2560x104.png?rect=44,6,1465,86&q=100&auto=format)

The `breadcrumbs` module renders a navigation trail for the current page—especially useful for nested routes like /blog/category/post-title. It ships with Breadcrumb schema.org markup by default.

What makes this module smart is the structuredDataOnly toggle: enable it and the breadcrumbs render their schema markup without displaying the visual UI element. You get Google's rich result breadcrumbs in search without affecting your page layout.

### Custom HTML

![Custom HTML module](https://cdn.sanity.io/images/cyu7k2r0/production/069a7d6293f1733d50ff0c21ad94b1f4e0c2f391-2560x458.png?rect=54,81,1984,315&q=100&auto=format)

The creator's personal favorite—and for good reason. `custom-html` is the escape hatch that gives developers superpowers.

Need to add a third-party tracking script? Drop it in. Have a YouTube or Vimeo embed code from a client? Done. Want to apply a specific CSS tweak to one module on one page without touching the global stylesheet? The optional css field handles it, scoped cleanly to that page.

This module threads a needle that most CMS systems get wrong: it gives technical teams the flexibility they need without exposing raw code editing to non-technical editors who shouldn't have it.

### Form Module

![Form module](https://cdn.sanity.io/images/cyu7k2r0/production/30b5b5f4e77c0f19474aaaa690e9c413a47d16d4-2560x766.png?rect=30,80,2497,646&q=100&auto=format)

Contact forms drive leads, and `form-module` makes them first-class citizens in the page builder. The module references a separate form document—build and configure a form once, then drop it onto any page.

The integration layer is intentionally flexible: wire it up to HubSpot, FormSpree, a custom API endpoint, or whatever your client is using. The module handles the UI; the backend is up to you.

### Search Module

![Search module](https://cdn.sanity.io/images/cyu7k2r0/production/8ca04131f5f98c5ec48021734acb489377de7a45-2560x396.png?rect=269,91,2047,280&q=100&auto=format)

Built-in site search with a scope parameter editors can control—search across all content, or restrict it to just pages or just blog posts. Under the hood it uses GROQ's content-lake search, so you're querying actual Sanity data without needing a third-party search index.

It's a feature that takes weeks to build properly from scratch. Here, it's a module you add in seconds.

## Blog Modules

SanityPress ships with a complete blogging system. These three modules cover the full publishing surface.

### Blog Index

![Blog index module](https://cdn.sanity.io/images/cyu7k2r0/production/893cfd79e7a8870071096d3eeb9c60dffb4d2a65-2548x1656.png?rect=24,74,2512,1558&q=100&auto=format)

The `blog-index` module is the blog's homepage. It automatically pulls the most recent post as a featured article at the top, then renders the rest in a paginated grid with category filters built in. Set postsPerPage to control how many posts appear per page.

Drop this module on a page and point the slug at /blog—that's all it takes to have a full, filter-navigable blog homepage.

### Blog Post List

![Blog post list module](https://cdn.sanity.io/images/cyu7k2r0/production/3c4a12acfd995d697a105959910099066188251d-2560x1136.png?rect=22,87,2498,1002&q=100&auto=format)

A reusable widget for surfacing recent posts anywhere on the site. Use it on the homepage to drive traffic to the blog. Use it on individual blog post pages as a "Read More" section—it automatically filters out the post currently being viewed, so there's no awkward self-reference.

Control how many posts appear with the limit field.

### Blog Post Content

![Blog post content module](https://cdn.sanity.io/images/cyu7k2r0/production/bbaa595fbf392a9c392f46ccae29a123bbe61797-2554x2216.png?rect=62,31,2457,1933&q=100&auto=format)

The article renderer. It handles the full `blog.post` document with rich text, embedded images, code blocks, and custom HTML. The standout option: a table of contents that floats left or right of the article body; useful for long-form technical content where readers benefit from navigation landmarks.

## Building a High-Converting Landing Page

Here's what this system looks like in practice. Below is an 8-module stack for a high-converting product or service landing page—assembled entirely from SanityPress modules, no custom code required.

* `hero.split` 👉 Headline + subheadline + product image + primary CTA
* `logo-list` 👉 Social proof logos with `autoScroll`
* `stat-list` 👉 Key metrics
* `card-list` 👉 4-6 UVPs with icons
* `step-list` 👉 "How it works" 3 steps with How-To schema
* `quote-list` 👉 2-4 testimonials with name, role, photo
* `accordion-list` 👉 FAQs with schema.org markup
* `callout` 👉 Final CTA

This exact layout has been created as a [sample page here](https://sanitypress.dev/sample-landing).

### The Prompt

Using Claude with the Sanity MCP, you can generate a page like this with a single prompt. Here's the one we used:

* Claude Code

```
Create a high-converting landing page in Sanity using SanityPress modules.
Use this module stack in order:

1. hero.split — Strong headline + 1-sentence subheadline + product image/screenshot + one primary CTA button
2. logo-list — "Trusted by" or "As seen on" section, autoScroll enabled for 6+ logos
3. stat-list — 3-4 key metrics with short descriptors (e.g. "30+ Sites Shipped", "3 Years Active")
4. card-list — 4-6 unique value props, each with an icon and 2-3 sentence description
5. step-list — 3-step "How it works" flow, How-To schema enabled
6. quote-list — 2-4 customer or developer testimonials with name, role, and photo
7. accordion-list — 5-7 FAQs, FAQ schema enabled for SEO
8. callout — Final conversion section: compelling headline + 1 strong CTA button

Keep copy concise and benefit-focused. Every section should answer: "Why does this matter to me?"
```

Run that prompt with your product details swapped in, and an agent can scaffold the entire page—content and all—directly into your Sanity dataset in minutes.

## What's Next

SanityPress is actively maintained and continuing to evolve, especially as AI tooling like the Sanity MCP makes content generation and page scaffolding faster than ever.

* [See how easy it is to make edits in the Studio](https://sanitypress.dev/docs/how-to-make-edits): no-code content management at its best
* [Star SanityPress on GitHub](https://sanitypress.dev/repo): stay up to date on the changelog and show your support
* [View all modules](https://sanitypress.dev/modules): browse every module with live examples
* [Start building](https://sanitypress.dev/docs/getting-started): clone the repo and ship your next website today

1. [Home](https://sanitypress.dev/)
2. [Blog](https://sanitypress.dev/blog)
3. Building Websites with Modules That Convert

## Stop Scaffolding. Start Shipping.

[🚀 Start building](https://sanitypress.dev/docs/getting-started)[⭐ Star on GitHub](https://sanitypress.dev/repo)