Blocks Overview

How blocks work

BlockRenderer.vue maps blockType to a component. Each block has type-specific props. Blocks are processed at build time (Lexical → HTML, URL conversion for images).

Block list

Each block has a showcase page with examples and usage notes:

• Accordion — Collapsible items
• Content Listing — Dynamic page listings
• CTA Cards — Card-based CTAs
• CTA Section — Call-to-action sections
• Detail Cards Grid — Cards with multiple items
• Form — Contact/consultation forms
• Hero — Large hero sections with CTAs
• Icon Cards Grid — Feature cards with icons
• Image — Images with captions, alignment
• Image & Text — Side-by-side layout
• Link Tree — Vertical link stacks
• Page Header — Title and description
• Pricing Table — Pricing plans
• Rich Text — HTML content
• Spacer — Vertical spacing, dividers
• Stats — Metrics and statistics
• Tabs — Tabbed content
• Testimonials — Customer quotes
• Steps / Timeline — Process flows
• Upcoming Events — Events with upcoming/past split
• YouTube — Embedded videos

Processing

Some blocks are processed at build time:

• Lexical → HTML — richText, accordion items, tabs content, imageText content
• URL conversion — image, hero, testimonials, ctaCards, ctaSection, iconCardsGrid, contentListing, pricingTable, linkTree, upcomingEvents (Payload URLs → R2)
• Event split — upcomingEvents: events with dateEnd in the past move to "Past Events"

Next: Local Sites