Internal reference
How to build a product or solution page
Every product and solution page is composed of sections configured in Sanity. This guide walks through each section type, the fields that drive it, and shows a live example using the same components the live site uses. Use the theme toggle in the top right to preview light and dark mode.
Hero
sectionType: "hero"Top-of-page banner with headline, supporting copy, badges, and CTAs.
When to use
Always the first section on a product or solution page. Sets up the page promise and the primary call to action.
Sanity fields
| Field | Type | What it controls |
|---|---|---|
content.title* | string | Large headline at the top of the page. |
content.description | text | Supporting paragraph below the headline. |
content.pointers | array<string> | Pill-shaped badges between the heading and the CTAs. Use 3–5 short keywords. |
content.links | array<linkEntry> | Up to 2 CTA buttons. The first is rendered as the primary action. |
content.imageUrl | url | Optional right-side image (hidden on mobile). Ignored if an illustration is selected. |
content.illustrationKey | string | Optional animated illustration rendered to the right of the copy on desktop (hidden on mobile). Takes precedence over imageUrl. |
Fields marked with * are required for the section to render correctly.
Live example
A flexible lending stack built for MSME business loans.
Design, launch, and scale credit products on a configurable platform — without rebuilding infrastructure for each new program.
Statement
sectionType: "statement"Centered text block with an eyebrow label, a short headline, and a supporting paragraph.
When to use
Use as a transition or chapter marker between content-heavy sections. Keep it short and confident.
Sanity fields
| Field | Type | What it controls |
|---|---|---|
content.label | string | Small uppercase eyebrow label above the title. |
content.title* | string | The main statement headline. |
content.description | text | One supporting sentence below the title. |
Fields marked with * are required for the section to render correctly.
Live example
Designed to power MSME lending at scale.
Origination, underwriting, and disbursement on a single platform — built for the complexity of modern credit programs.
Illustration
sectionType: "illustration"Full-content-width animated SVG illustration with an optional heading. Picked from a fixed set defined in the studio package.
When to use
When you want a visual centerpiece — a product mock, an architecture diagram, or a process animation. Drop one between feature sections to break up text and show, not tell. Hidden below `lg`, so pair with a statement section above for mobile context if needed.
Sanity fields
| Field | Type | What it controls |
|---|---|---|
content.illustrationKey* | string | The illustration to render. Pick from the dropdown — options come from `packages/studio/illustrations.json`. |
content.title | string | Optional heading shown above the illustration. |
content.description | text | Optional supporting sentence under the heading. |
Fields marked with * are required for the section to render correctly.
Live example
Applications
sectionType: "applications"Two-column section showing supported products or use cases. Renders as a tabbed switcher when modules are present, or a clean grid when only items are present.
When to use
When you need to show "what kinds of things this can do" — product types, customer segments, deployment patterns. Use modules for richer cards (name + description + icon), or items for a quick chip grid.
Sanity fields
| Field | Type | What it controls |
|---|---|---|
content.label | string | Eyebrow label above the section title. |
content.title* | string | Section title. |
content.description | text | Supporting sentence under the title. |
content.items | array<string> | Simple chip grid (used when no modules are provided). |
content.modules[].name | string | Name of an application card. |
content.modules[].description | text | Short paragraph under the application name. |
content.modules[].icon | icon | Icon shown on the application card. Pick from the Phosphor collection in Sanity. |
Fields marked with * are required for the section to render correctly.
Live example
One stack. Multiple business loan products.
Spin up new lending products without rebuilding the underlying infrastructure.
Feature list — minimal
sectionType: "feature-list-minimal"Compact list of bullet items with optional title and description. Best for quick capability overviews.
When to use
When you want to show a list of features or capabilities without expanding on each one. Pairs well after a hero or statement.
Sanity fields
| Field | Type | What it controls |
|---|---|---|
content.label | string | Eyebrow label above the title. |
content.title | string | Section title. |
content.description | text | Supporting sentence under the title. |
content.items* | array<string> | The list of features. Each becomes a row. |
Fields marked with * are required for the section to render correctly.
Live example
Built for the realities of credit operations
Every parameter is configurable, every decision is logged, every action is auditable.
Feature list — expanded
sectionType: "feature-list-expanded"Module grid where each card has an icon, name, and description. The flagship section for documenting modules and capabilities.
When to use
When each item needs its own explanation. Best for listing modules, product features, or capabilities where the reader needs more than just a label.
Sanity fields
| Field | Type | What it controls |
|---|---|---|
content.label | string | Eyebrow label above the title. |
content.title | string | Section title. |
content.description | text | Supporting sentence under the title. |
content.modules[].name* | string | Name of the module / capability. |
content.modules[].description | text | One- to two-sentence explanation of the module. |
content.modules[].icon | icon | Icon shown to the left of the module name. Pick from Phosphor in Sanity. |
Fields marked with * are required for the section to render correctly.
Live example
Everything you need to run a loan portfolio
Comprehensive modules covering origination, servicing, and collections.
Borrower Profile Management
Maintain structured borrower records with full document history and KYC state.
Credit Bureau Integrations
Pull bureau data in real time and run policy-driven credit assessments.
Offer, eSign & Disbursal
Generate digital sanction letters and disburse through a single execution layer.
Collections & Servicing
Automated reminders, delinquency workflows, and end-to-end customer servicing.
Feature list — checked
sectionType: "feature-list-checked"Two-column list where each item is rendered with a green check mark.
When to use
When you want to highlight benefits, compliance commitments, or guarantees. The check marks signal "we do this".
Sanity fields
| Field | Type | What it controls |
|---|---|---|
content.label | string | Eyebrow label above the title. |
content.title | string | Section title. |
content.description | text | Supporting sentence under the title. |
content.items* | array<string> | Each string becomes a checked item. Use a colon to split into a label and a description (e.g. "RBI Aligned: ..."). |
Fields marked with * are required for the section to render correctly.
Live example
Compliance baked in by design
Every workflow is built around regulator-grade controls.
- RBI Aligned: Workflows designed for digital lending guidelines.
- Audit Trails: Every decision is logged, every override is justified.
- Co-lending Ready: Multi-lender splits handled at the transaction level.
- Configurable Policies: Risk teams can iterate without engineering tickets.
Feature list — 2-column
sectionType: "feature-list-2-col"Two-column module grid with prominent icons and accent colors. Visually richer than the expanded list.
When to use
When you have 4–6 modules that deserve more breathing room than the expanded list. Great for compliance pillars, "who this is for" sections, or platform tenets.
Sanity fields
| Field | Type | What it controls |
|---|---|---|
content.label | string | Eyebrow label above the title. |
content.title | string | Section title. |
content.description | text | Supporting sentence under the title. |
content.modules[].name* | string | Module title shown bold at the top of each card. |
content.modules[].description | text | Short description under the module name. |
content.modules[].icon | icon | Phosphor icon shown in the colored chip. |
Fields marked with * are required for the section to render correctly.
Live example
Compliance-ready by design
Built to align with RBI guidelines, LSP requirements, and co-lending structures.
RBI Guidelines Ready
Aligned with digital lending rules and regulatory disclosures.
Complete Traceability
Audit trails and consent logs for every transaction.
LSP & Co-Lending Support
Multi-lender ratios, settlements, and structures handled natively.
Granular Access Controls
Role-based permissions across credit, ops, and compliance teams.
Process flow
sectionType: "process-flow"Numbered, sequential steps with icons. Renders as a connected timeline.
When to use
When the content is genuinely sequential — a loan journey, an onboarding flow, an approval pipeline. Number the module names (e.g. "01 Application", "02 Data Fetch") to reinforce ordering.
Sanity fields
| Field | Type | What it controls |
|---|---|---|
content.label | string | Eyebrow label above the title. |
content.title | string | Section title. |
content.description | text | Supporting sentence under the title. |
content.modules[].name* | string | Step name. Conventionally prefixed with the step number ("01 Application"). |
content.modules[].description | text | One-line description of what happens at this step. |
content.modules[].icon | icon | Phosphor icon shown in the step badge. |
Fields marked with * are required for the section to render correctly.
Live example
End-to-end personal loan journey
A typical loan moving through the platform — fully automated and configurable.
01 Application
Borrower applies via API or UI with basic details.
02 Data Fetch
KYC, bureau, income, and bank data pulled in real time.
03 Policy Evaluation
Segment-specific credit rules executed against fetched data.
04 Offer & Disbursal
Personalized offer, eSign, and instant fund transfer.
01 Application
Borrower applies via API or UI with basic details.
02 Data Fetch
KYC, bureau, income, and bank data pulled in real time.
03 Policy Evaluation
Segment-specific credit rules executed against fetched data.
04 Offer & Disbursal
Personalized offer, eSign, and instant fund transfer.
Call to action
sectionType: "cta"Closing block with a label, title, supporting line, and one or two action buttons.
When to use
Almost always the second-to-last section, just before the FAQ. Drive readers toward a demo, a contact form, or a download.
Sanity fields
| Field | Type | What it controls |
|---|---|---|
content.label | string | Eyebrow label above the title (e.g. "Get Started"). |
content.title* | string | The action headline. Phrase it as a question or directive. |
content.description | text | One supporting sentence below the title. |
content.links* | array<linkEntry> | CTA buttons. First link renders as primary, the rest as outline. Up to 2 recommended. |
Fields marked with * are required for the section to render correctly.
Live example
Ready to modernize your lending stack?
See how Crego fits into your origination and servicing workflows in a 30-minute walkthrough.
FAQ
sectionType: "faq"Accordion of questions and answers, sourced from FAQ documents linked to the parent product or solution.
When to use
Always the final section. The FAQs are not authored on the section itself — they live as separate `faq` documents in Sanity, and the page query auto-attaches the ones tied to this product/solution.
Sanity fields
| Field | Type | What it controls |
|---|---|---|
content.label | string | Optional eyebrow label above the title (defaults to "FAQ"). |
content.title | string | Section title (defaults to the standard FAQ heading if blank). |
content.description | text | Optional supporting sentence under the title. |
faq.question* | string | On a separate FAQ document — the question text. Linked to this page via the `productOrSolution` reference. |
faq.answer* | text | On a separate FAQ document — the answer text. |
Fields marked with * are required for the section to render correctly.
Live example
Frequently asked questions
The questions we hear most often from credit and operations teams.