Content Feature Media

Install a typed Payload CMS feature-media block with body copy, two icon features, and a framed image. The CLI wires it into your Pages layout and renderer.

v0.1.1Page blockContent familyContent section

New in 0.1.1 Version the current component and shared source, including explicit localization semantics where applicable.

Installation

npx payload-components add content-feature-media

What it installs

Copies 4 source files into your project:

  • src/blocks/shared/contentFields.tsshared
  • src/blocks/shared/contentIcons.ts
  • src/blocks/ContentFeatureMedia/config.ts
  • src/blocks/ContentFeatureMedia/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 shared source for this component family. Components that install the same path reuse that local copy, and re-running an install never overwrites a copy you have changed.

Re-running the CLI install detects existing source and wiring, then 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 features list and image upload are specific to this variant. Feature icons are chosen from the shared allowlist in src/blocks/shared/contentIcons.ts.

Prop

Type

Each item in features carries:

Prop

Type

Usage

Add the block to a page. In the Payload admin, open (or create) a Page and add the ContentFeatureMedia 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 patched by payload-components add. The CLI verifies this against the support matrix before touching anything.

In this family

content-columns
Content ColumnsA two-column content section pairing a heading with body paragraphs and a CTA, installed as a wired Payload block.
content-image-lead
Content Image LeadA content section led by a full-width image above a two-column heading, body, and CTA.
content-feature-mediacurrent
Content Feature MediaA content section pairing body copy and two icon features beside a framed media panel.
content-feature-split
Content Feature SplitA content section pairing a side media panel with body copy and two icon features.
content-showcase
Content ShowcaseA centered content section with an intro, a full-width image, and a four-up grid of icon features.
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-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-image-frame
Content Image FrameA centered content section with an intro and a layered, framed screenshot.
content-stats
Content StatsA content section with an intro, a grid of icon features, and a stats list.
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.