Extras

Pro

The full catch-all set: heroes, sections, cards, features, marquees, lexical embeds, and more.

Section

section
ProVNGD

Container section with background color and spacing controls

Source code available to entitled users.

Spacer

spacer
ProWabbit

Vertical spacing with responsive visibility controls

Source code available to entitled users.

Grid

grid
ProVNGD

CSS grid container with configurable columns and gap

Source code available to entitled users.

Stacking Wrapper

stacking-wrapper
ProWabbit

Container that stacks child blocks with parallax effect on scroll

Renderer for "stacking-wrapper" is not registered. Call registerGalleryPackComponents('extras', map) before rendering.
Source code available to entitled users.

Content

content
ProWabbit

Multi-column rich content block with configurable 14-column grid

Designing systems that outlast the sprint

A well-considered design system does more than enforce visual consistency — it encodes the reasoning behind decisions so future contributors can extend the work with confidence.

When teams treat components as contracts rather than templates, the whole organisation gains a shared vocabulary for talking about interfaces without needing to open Figma.

Explore the framework
Source code available to entitled users.

Text Block

text-block
ProVNGD

Rich text content with optional links

What makes a block worth shipping?

Explore the block libraryBlock authoring guide
Source code available to entitled users.

Code Block

code
ProTome

Syntax-highlighted code snippet

typescript
import { defineBlock } from '@wabbit/tome-blocks-core/defineBlock'
import { BLOCK_CATEGORIES } from '@wabbit/tome-blocks-core/categories'

export const exampleBlock = defineBlock(
  {
    slug: 'example',
    name: 'Example Block',
    description: 'A minimal block to demonstrate the defineBlock API',
    category: BLOCK_CATEGORIES.UTILITY,
    tags: ['example', 'developer'],
    source: 'wabbit',
  },
  () => ({
    slug: 'example',
    interfaceName: 'ExampleBlock',
    labels: { singular: 'Example', plural: 'Examples' },
    fields: [
      {
        name: 'title',
        type: 'text',
        required: true,
      },
    ],
  }),
)
A minimal defineBlock() call — the pattern every @wabbit/tome-blocks-* package follows.
Source code available to entitled users.

Section Header

section-header
ProWabbit

Section title with optional category badge, description, and CTA

Renderer for "section-header" is not registered. Call registerGalleryPackComponents('extras', map) before rendering.
Source code available to entitled users.

Content Two Column

content-two-column
ProWabbit

Two-column layout with text or media in each column

Craft that compounds over time

Editorial rigour is not an overhead — it is the asset. Writers who invest in structure early find that their archives become searchable, linkable, and evergreen long after publication.

The platform handles the scaffolding so the author can focus entirely on the argument.

Source code available to entitled users.

Bento Section

bento-section
ProWabbit

Bento grid layout with headline, gallery, and optional sidebar quote

Behind the Work

Every project starts with a problem worth solving. We spend the first week listening before we write a single line of code — because the wrong answer built well is still the wrong answer.

These are the moments that shaped how we think about craft, collaboration, and the long game.

The studio in its natural state — mid-sprint, post-coffee.

Whiteboarding session before the VNGD grid migration.

Ship day for tome-core v1.0.

Source code available to entitled users.

Blog Hero

blog-hero
ProWabbit

Blog post hero with featured image, author, date, and category

How We Built a Real-Time Collaboration Layer Without WebSockets

A deep dive into the architectural decisions behind our multiplayer editing engine — and why we chose Server-Sent Events over WebSockets for a simpler, more resilient pipeline.

Maya Thornton
12 min read
Read More
Source code available to entitled users.

Card Grid

card-grid
ProWabbit

Grid of cards with media, text, and links

Everything Your Team Needs to Grow

From onboarding to automation, the platform handles the operational weight so your team stays focused on the work that matters.

Instant Onboarding

New members go from signup to productive in under ten minutes — no IT ticket required.

See How It Works

Modular by Design

Turn on the layers your org needs today. Add more as you scale — nothing breaks, nothing has to be rebuilt.

Browse Modules

Role-Based Access, Out of the Box

Granular permissions for every team tier — admin, editor, viewer, learner — controlled without writing a single line of code.

View Permissions Model
Source code available to entitled users.

Card

card
ProWabbit

Standalone card with media, text, and link options

Ship Faster Without Breaking Things

A modular platform that scales from solo operator to enterprise team — without the usual rewrites.

Explore the PlatformRead the Docs
Source code available to entitled users.

Changelog

changelog
ProWabbit

Release notes / version history with dated entries

Renderer for "changelog" is not registered. Call registerGalleryPackComponents('extras', map) before rendering.
Source code available to entitled users.

Chapter Hero

chapter-hero
ProWabbit

Section/chapter header with breadcrumbs, author info, publish date, read time, and background options

Chapter 3: Designing for Uncertainty

Every system eventually meets conditions its designers did not anticipate. This chapter examines how tolerant design — building in slack, reversibility, and observability — turns unknown unknowns into manageable surprises.

Dr. Elias Romero
22 min read
Continue ReadingBack to Part II
Source code available to entitled users.

Checklist

checklist
ProWabbit

Styled list with configurable icons and states

What's included in every Wabbit build

  • Payload CMS with full type safety across the stack
  • Private npm registry for @wabbit/tome-* packages
  • Manifest-driven admin sidebar (no hard-coded configs)
  • Vendor lock-in to a single cloud provider
  • LearnerShell with mobile sheet navigation
Source code available to entitled users.

Content With Bento

content-with-bento
ProWabbit

Content section paired with a bento grid of media items

Platform Capabilities

Everything the modern agency needs, assembled once

Adaptive Grid

A 14-column editorial grid that flexes from full-bleed hero to marginalia annotation without a single breakpoint hack.

Learn more

Rich Media

Upload-once, consume-everywhere image and video handling with automatic format negotiation.

Type System

Optical sizing and measure constraints baked into every prose block.

Motion Layer

GSAP-powered scroll triggers that respect reduced-motion preferences.

Source code available to entitled users.

Content With Corner Notch

content-with-corner-notch
ProWabbit

Two-column content block with decorative corner notch

Built for teams that ship every week

Agencies running on Tome deliver cohesive sites faster because every design decision is encoded in the platform — not scattered across Notion docs and Slack threads.

The corner notch is your attention anchor: place a stat, a CTA, or an icon exactly where the eye lands on entry.

Avg. ROI
4.8×
Projects
130+
Source code available to entitled users.

Content With Marquee

content-with-marquee
ProWabbit

Rich content section with optional scrolling text marquee

The platform that disappears so your work can appear

See case studiesRead the docs
Craft · Clarity · Craft · Clarity · Craft · Clarity · Craft · Clarity ·
Source code available to entitled users.

Custom Hero

custom-hero
ProVNGD

Unified VNGD hero with 20+ design versions including COP tactical layouts, SITREP post headers, and classic marketing variants

UNCLASSIFIEDOperational Status

Fleet Readiness Dashboard

Live readiness summary for all active units. Data refreshes every 60 seconds. Contact your fleet coordinator for access issues.

View DashboardDownload Report
Source code available to entitled users.

Custom Block

custom
ProVNGD

Site-specific custom block container with type selector

Source code available to entitled users.

Feature Hero with Cards

feature-hero-with-cards
ProWabbit

Hero section with feature cards grid and optional icon types

Why Tome

The Fastest Path from Idea to Shipped Content

Stop rebuilding the same admin scaffolding on every project. Tome ships with a composable block library, a type-safe API layer, and a design system that adapts to your brand.

Zero-Config Blocks

Drop any block into your Payload config and it works — fields, validation, and CMS UI included.

Type-Safe End to End

Generated TypeScript interfaces from your Payload schema mean no runtime surprises in your components.

Multi-Tenant Ready

Org, team, and member primitives are built in so you can launch to multiple clients from a single codebase.

Designed to Extend

Every block and adapter is a TypeScript module you own — fork, extend, and ship without waiting for upstream changes.

Source code available to entitled users.

Feature Masonry

feature-masonry
ProWabbit

Masonry grid layout with mixed-size feature cards and CTA

How We Deliver at Every Scale

Small team, enterprise rollout, or something in between — the platform adapts to where you are today and grows with you.

See the Full Roadmap
Foundation

Start With What You Need

Enable only the layers your team requires on day one. The rest waits quietly in the background until you are ready — no migrations, no rewrites.

Explore Layers
Content

Editorial-Grade Block System

Over 60 blocks across layout, marketing, and longform — built on a shared grid so everything aligns without custom CSS.

Source code available to entitled users.

Feature with Icon Grid

feature-with-icon-grid
ProWabbit

Hero section with configurable icon-based feature grid and spacing controls

A Platform Built for Teams That Ship

Every layer is purpose-built, independently deployable, and designed to work together from day one.

Tome gives agencies and product teams the structural advantage of an enterprise platform without the enterprise overhead. Pick the layers you need, wire them to your Payload config, and deploy.

Role-Based Permissions

Fine-grained access controls at the org, team, and member level — no custom middleware required.

Modular Block System

Over 60 layout and marketing blocks on a shared subgrid — mix and match without layout drift.

Built-In LMS

Curriculum trees, certifications, and learner-shell UI — ready to wire to any Payload instance.

Agency CRM

Contacts, deals, intake forms, and territory management — all sharing one member identity layer.

Instant Performance

Edge-cached, incrementally statically regenerated, and tree-shaken at build time.

Private Registry

All packages published to your Verdaccio instance — you own the supply chain, not npm public.

Source code available to entitled users.

Feature with Large Media

feature-with-large-media
ProWabbit

Feature section with prominent media display, badge, and optional footer CTA

Now in Production

The Platform That Grows With You

From solo operator to agency at scale — without the rewrite.

Tome is a modular Payload CMS platform built for teams that ship. Enable the layers you need today, add more as your organization grows, and deploy to any infrastructure you already own.

No vendor lock-in. No seat-based pricing. Just a clean, extensible foundation.

Trusted by agencies building on Payload CMS.

Request Access
Source code available to entitled users.

Feature with Three Steps

feature-with-three-steps
ProWabbit

Numbered step-by-step feature layout with timeline connectors and images

Go from Zero to Deployed in Three Steps

Tome is designed to be operational the same day you fork the starter. No bespoke infrastructure required.

1

Fork the Starter

Clone the tome-starter repo, configure your Payload instance, and point it at your Verdaccio registry. The scaffold ships with auth, roles, and the admin sidebar pre-wired.

2

Enable Your Layers

Add the @wabbit/tome-* packages for the capabilities you need — LMS, CRM, blocks, motion — and register them in payload.config.ts. Each layer is independently deployable.

3

Deploy and Iterate

Push to your host of choice. Coolify, Vercel, Railway — the starter is infrastructure-agnostic. Ship incremental changes without breaking existing consumers.

Source code available to entitled users.

Image Hero

image-hero
ProWabbit

Full-bleed image hero with configurable fit, background color, and text theme

Source code available to entitled users.

Image Marquee

image-marquee
ProWabbit

Scrolling marquee with text or images mode

Source code available to entitled users.

Lexical Banner

lexical-banner
ProVNGD

Inline banner/callout block for use inside Lexical richText editors

Source code available to entitled users.

Document Embed

lexical-document-embed
ProVNGD

Inline document embed block for use inside Lexical richText editors

Source code available to entitled users.

Entity Reference

lexical-entity-reference
ProVNGD

Inline entity reference block for use inside Lexical richText editors

Referenced Entity
Source code available to entitled users.

Motion Text

lexical-motion-text
ProVNGD

Animated text block with word-by-word motion effects for Lexical richText editors

We build fast. focused. for keeps.

Source code available to entitled users.

Low Impact Hero

low-impact-hero
ProWabbit

Minimal text-only hero with headline, subheadline, description, and optional links

Documentation

Getting Started with Tome

Everything you need to go from zero to production in under an hour.

Tome is a composable content platform built on Payload CMS. Follow this guide to install the packages, wire your Payload config, and render your first block.

★★★★★312+ reviews
Read the DocsWhat's New
Source code available to entitled users.

Marquee

marquee
ProWabbit

Scrolling text marquee with speed and direction controls

Wabbit builds on Tome — the open-source Payload CMS platform for agencies

Wabbit builds on Tome — the open-source Payload CMS platform for agencies

Source code available to entitled users.

Media Feature

media-feature
ProWabbit

Split layout feature with video or image media and CTA button

See the Platform in Motion

A five-minute walkthrough of the Tome admin, the block editor, and the learner shell — from a cold fork to a working staging deploy.

No sales script. Just the actual product doing its job.

Schedule a Live Demo
Source code available to entitled users.

Medium Impact Hero

medium-impact-hero
ProWabbit

Balanced hero with headline, description, links, and a featured media element

Now in Public Beta

Ship Faster With a Content Platform Built for Developers

Composable blocks, type-safe APIs, and a design system that grows with your team.

Tome gives you a Payload CMS foundation with a library of production-ready content blocks — so you spend less time wiring data and more time building what differentiates your product.

★★★★★187+ reviews
Start BuildingSee a Demo
Source code available to entitled users.

Page Hero

page-hero
ProVNGD

Standard page header hero with headline, subtext, and optional background image

UNCLASSIFIEDOperations Center

Mission Planning & Coordination

Centralized hub for active mission parameters, unit assignments, and real-time coordination across all theater elements.

Open PlannerView Briefings
Source code available to entitled users.

Post Content

post-content
ProWabbit

Rich text content block for blog posts with optional section title

The Argument

Content strategy documents are optimistic by nature — they describe the ideal cadence, the target persona, the content pillars. What they rarely specify is how the words get from a writer's draft to a reader's screen without losing their structure, their metadata, or their editorial intent.

A delivery layer is not a CMS. It is the contract between authorial decisions and rendering behaviour: which heading levels are semantically meaningful, where the measure constraint kicks in, how images negotiate their container. Without that contract, strategy becomes a hope.

Source code available to entitled users.

Post Notice

post-notice
ProWabbit

Callout or notice block for blog posts

Source code available to entitled users.

Project Info

project-info
ProWabbit

Case study or project information block with rich text description

Wabbit is a boutique web agency specialising in content-rich membership platforms. Founded after a 20,000-member WP+BuddyBoss collapse, the agency was rebuilt on Payload CMS and a custom component platform called Tome.

Tome is now extracted into @wabbit/tome-* packages published to a private Verdaccio registry. It powers agency client sites, Star Citizen org hubs, and the 6DOF Academy flight training platform.

Every Wabbit engagement includes full source ownership, no vendor lock-in, and a private npm registry your team controls.

Source code available to entitled users.

Prose Section

prose-section
ProVNGD

Rich text prose with optional sidebar layout

Editorial Standard

Typography is not decoration — it is the primary interface between a writer's intention and a reader's comprehension. When measure, leading, and optical size are calibrated together, the reader stops noticing the type and starts noticing the ideas.

The prose-section block enforces a 65-character measure by default because decades of typographic research converge on that number as the boundary between comfortable reading and fatiguing line length. Tighten it for dense annotation; open it for expository argument.

Source code available to entitled users.

Pull Quote

pull-quote
ProVNGD

Highlighted quotation with attribution and optional portrait

The best infrastructure is the kind nobody argues about — it just works, and the team spends their energy on the parts that actually differentiate the product.

Priya KhatriHead of Platform, Meridian Labs
Source code available to entitled users.

Related Items

related-items
ProWabbit

Display related items from any collection

Related Case Studies

More work from the same discipline.

Showing related posts (limit: 3)

View All Case Studies
Source code available to entitled users.

Showcase

showcase
ProWabbit

Video showcase section with headline and background options

Recent Success Stories

Client Wins Worth Talking About

DarkDark background showcase with accent highlight on featured content.

Recent Work

MinimalBorderless showcase — clean typography, no card surfaces.
Source code available to entitled users.

Signature

signature
ProWabbit

Author signature block with optional avatar

David BickleyFounder, Wabbit Agency
Source code available to entitled users.

Skill Showcase

skill-showcase
ProWabbit

Portfolio skill bars with profile and accent images

Full-stack product engineer with a decade of shipping at the intersection of design systems, CMS architecture, and growth marketing.

I build the infrastructure that lets creative teams move fast without accumulating technical debt.

Platform Architecture94%
React / Next.js97%
Design Systems88%
Payload CMS95%
Source code available to entitled users.

Study Hero

study-hero
ProWabbit

Case study / portfolio hero with full-bleed image, title overlay, and category tags

Platform EngineeringLMSCase Study

Rebuilding the Swag Academy Member Portal at Scale

Source code available to entitled users.

Typography Hero

typography-hero
ProWabbit

Type-driven hero with configurable headline/subheadline/description sizes, background options, and text theme

Words That Move People

Editorial craft at the intersection of design and code.

We believe the quality of your typography is the quality of your thinking made visible. Every spacing decision, every weight choice, every measure is an argument for how seriously you take your reader.

Explore the Work
Source code available to entitled users.