payload-contracts/docs/BLOCK_CATALOG.md

Block Catalog

All 43 CMS blocks available for frontend implementation. Auto-generated reference — see src/types/blocks.ts for exact TypeScript types.

How to Use

import type { Block, BlockByType } from '@c2s/payload-contracts/types'

// Get a specific block type
type HeroBlock = BlockByType<'hero-block'>

// Switch on block type (discriminated union)
function renderBlock(block: Block) {
  switch (block.blockType) {
    case 'hero-block': return <Hero {...block} />
    case 'text-block': return <Text {...block} />
    // ...
  }
}

Core Blocks

#	Slug	Name	Key Fields
1	hero-block	Hero	title, subtitle, image, ctaButtons, style, overlay
2	hero-slider-block	Hero Slider	slides[], autoplay, animation, interval
3	image-slider-block	Image Slider	images[], layout, columns
4	text-block	Text	content (richText), alignment, maxWidth
5	image-text-block	Image + Text	image, content, imagePosition, ratio
6	card-grid-block	Card Grid	cards[], columns, layout
7	quote-block	Quote	quote, author, role, image, style
8	cta-block	Call to Action	title, description, buttons[], style
9	contact-form-block	Contact Form	form (relationship), layout
10	timeline-block	Timeline	entries (from Timeline collection)
11	divider-block	Divider	style, spacing, color
12	video-block	Video	videoUrl, poster, autoplay, aspectRatio

Content Blocks

#	Slug	Name	Key Fields
13	posts-list-block	Posts List	postType, layout, limit, showExcerpt, showDate
14	testimonials-block	Testimonials	displayMode, layout, autoplay
15	newsletter-block	Newsletter	title, description, buttonText
16	process-steps-block	Process Steps	steps[], layout, numbering
17	faq-block	FAQ	displayMode, categories, layout, schema (JSON-LD)
18	team-block	Team	displayMode, roles, layout, columns
19	services-block	Services	displayMode, categories, layout

Blogging Blocks

#	Slug	Name	Key Fields
20	author-bio-block	Author Bio	author (relationship), showSocial
21	related-posts-block	Related Posts	limit, layout, strategy
22	share-buttons-block	Share Buttons	platforms[], layout
23	toc-block	Table of Contents	style, maxDepth

Team Blocks

#	Slug	Name	Key Fields
24	team-filter-block	Team Filter	roles[], layout, filterLayout
25	org-chart-block	Org Chart	maxDepth, layout, direction, nodeStyle

Feature Blocks

#	Slug	Name	Key Fields
26	locations-block	Locations	type, selectedLocations, layout, map
27	logo-grid-block	Logo Grid	logos[], layout, columns, slider
28	stats-block	Stats	stats[], layout, columns, animation
29	jobs-block	Jobs	displayMode, layout, columns, filters
30	downloads-block	Downloads	displayMode, layout, columns, filters
31	map-block	Map	center, zoom, markers, mapStyle

Interactive Blocks

#	Slug	Name	Key Fields
32	events	Events	displayMode, layout, columns, showImage
33	pricing	Pricing	plans[], layout, highlightPopular
34	tabs	Tabs	tabs[], tabStyle, defaultTab
35	accordion	Accordion	items[], style, iconPosition, layout
36	comparison	Comparison	items[], features[], layout

Tenant-Specific Blocks

#	Slug	Name	Tenant	Key Fields
37	before-after	Before/After	porwoll	pairs[], sliderStyle

BlogWoman Blocks

#	Slug	Name	Key Fields
38	favorites-block	Favorites	displayMode, layout, columns, filterCategory
39	series-block	Series	displayMode, layout, columns
40	series-detail-block	Series Detail	series (relationship), showHero
41	video-embed-block	Video Embed	videoUrl, aspectRatio, privacyMode
42	featured-content-block	Featured Content	items[], layout

YouTube Script Block (not in page layout)

#	Slug	Name	Used In
43	script-section	Script Section	yt-script-templates

Common Patterns

All blocks share these optional fields (via block config):

• title — Section heading
• subtitle — Section subheading
• description — Rich text description
• backgroundColor — Background color variant
• spacing — Top/bottom padding control
• id — Unique block ID (auto-generated)

Block Groups by Frontend

blogwoman.de (~17 blocks)

Core (hero, text, image-text, cta, video, divider) + Content (posts-list, testimonials, newsletter, faq) + BlogWoman-specific (favorites, series, series-detail, video-embed, featured-content) + Blogging (author-bio, related-posts, share-buttons)

porwoll.de (~15 blocks)

Core (hero, hero-slider, image-slider, text, image-text, card-grid, quote, cta, contact-form, video, divider) + Feature (before-after, testimonials, faq) + Team (team)

complexcaresolutions.de (~20 blocks)

Core + Content + Team (team, team-filter, services, org-chart) + Feature (locations, logo-grid, stats, jobs, downloads)