Documentation
Page blocksContent

Content Columns

A two-column content section pairing a heading with body paragraphs and a CTA.

v0.1.0Page blockContent familyContent section

Installation

npx payload-components add content-columns

What it installs

Copies 3 source files into your project:

  • src/blocks/shared/contentFields.tsshared
  • src/blocks/ContentColumns/config.ts
  • src/blocks/ContentColumns/Component.tsx

…and makes 4 edits to wire the block into your project:

Registers the blocksrc/collections/Pages/index.ts
Maps the renderersrc/blocks/RenderBlocks.tsx
Regenerates typessrc/payload-types.ts
Regenerates the admin import mapsrc/app/(payload)/admin/importMap.js
contentFields.ts is the shared field core for this family — every variant composes it. Editing it updates each installed block at once, and re-running an install never overwrites a copy you have changed.

Re-running the install converges: it detects existing wiring, skips it, and records install state in .payload-components/state.json.

Content model

The eyebrow, title, and paragraphs fields come from the shared Content family base (src/blocks/shared/contentFields.ts); the CTA links are specific to this variant.

Prop

Type

Each item in paragraphs carries:

Prop

Type

Usage

Add the block to a page. In the Payload admin, open (or create) a Page and add the ContentColumns block to its layout.
Fill the content. Complete the fields from the content model above — the component ships sample content you can start from.
Publish. Save and publish the page; the block renders through RenderBlocks on the frontend, fully typed — no extra wiring.

Requirements

Target
payload-website-starter, payload-blocks-app
Payload
v3
Next.js
15 / 16
shadcn UI
badge

Your project must already expose components.json, src/payload.config.ts — the surfaces payload-components add patches. The CLI verifies this against the support matrix before touching anything.

In this family

content-showcase
Content ShowcaseA centered content section with an intro, a full-width image, and a four-up grid of icon features.
content-image-lead
Content Image LeadA content section led by a full-width image above a two-column heading, body, and CTA.
content-feature-split
Content Feature SplitA content section pairing a side media panel with body copy and two icon features.
content-feature-media
Content Feature MediaA content section pairing body copy and two icon features beside a framed media panel.
content-image-frame
Content Image FrameA centered content section with an intro and a layered, framed screenshot.
content-split-rows
Content Split RowsA content section with an intro and alternating media-and-text rows.
content-rows
Content RowsA content section with an intro and a uniform stack of media-and-text rows.
content-stats
Content StatsA content section with an intro, a grid of icon features, and a stats list.
content-quote
Content QuoteA content section pairing a media panel with body copy and a cited pull quote.
content-community
Content CommunityA centered content section with a heading, body copy, and a wall of community avatars.
content-columnscurrent
Content ColumnsA two-column content section pairing a heading with body paragraphs and a CTA, installed as a wired Payload block.
content-list
Content ListA serif-headed content section pairing a heading with a labeled-term list.
content-list-columns
Content List ColumnsA serif-headed content section with a two-column labeled-term list.
content-list-icons
Content List IconsA serif-headed content section with an intro and a multi-column icon list.

Faq Grid

A static two-column grid of question/answer cards — no accordion.

Content Image Lead

Install a typed Payload CMS content block with a full-width lead image, two-column copy, and CTA. The CLI wires it into your Pages layout and renderer.