Blocks Gallery

Product cards, category grids, pricing tables, inventory badges, and featured product spotlights. Lights up rich @wabbit/tome-catalog integrations when the layer is present.

• Product Card

  Single product display with title, price, and CTA. Authored props are the floor; when @wabbit/tome-catalog is present and a SKU matches, title and description hydrate live server-side — see @wabbit/tome-blocks-catalog-pack/server.

  product-card

• Product Grid

  Responsive grid of product cards with filtering controls. Fully static — no @wabbit/tome-catalog peer required.

  product-grid

• Category Strip

  Horizontal strip or grid of product categories with labels and optional icons. Authored props are the floor; when @wabbit/tome-catalog is present and a category slug matches, the label hydrates live server-side — see @wabbit/tome-blocks-catalog-pack/server.

  category-strip

• Price Table

  Multi-tier pricing comparison table with feature rows and CTAs. Fully static — no @wabbit/tome-catalog peer required.

  price-table

• Inventory Badge

  Inline stock status badge. Fully static, deliberately — @wabbit/tome-catalog v1 models no stock/inventory field for this to hydrate from (see howToUse).

  inventory-badge

• Featured Product

  Full-width hero spotlight for a single product with full description, features, and CTA. Authored props are the floor; when @wabbit/tome-catalog is present and a SKU matches, title and description hydrate live server-side — see @wabbit/tome-blocks-catalog-pack/server.

  featured-product

Division cards, member grids, event calendars, org charts, document links, and campaign banners. Lights up rich @wabbit/tome-org integrations when the layer is present.

• Division Card

  Single division display with logo, name, description, member count, and leader. Fully static — no @wabbit/tome-org peer required.

  division-card

• Member Card

  Single member profile card with avatar, display name, rank, and position. Fully static — no @wabbit/tome-org peer required.

  member-card

• Member Grid

  Grid of member cards with heading, column count, and optional limit. Fully static — no @wabbit/tome-org peer required.

  member-grid

• Event Calendar

  Upcoming events list with date/title/status. Fully static — no @wabbit/tome-org peer required.

  event-calendar

• Event List Item

  Single event row for feeds and sidebars. Fully static — no @wabbit/tome-org peer required.

  event-list-item

• Org Chart

  Simple hierarchical Division -> Teams -> Squads display. Fully static — no @wabbit/tome-org peer required.

  org-chart

• Document Link

  Linked document card with title, category, and updated timestamp. Fully static — no @wabbit/tome-org peer required.

  document-link

• Campaign Banner

  Full-width campaign hero with banner image, codename, and objective count. Fully static — no @wabbit/tome-org peer required.

  campaign-banner

Course cards, lesson lists, progress indicators, quiz summaries, instructor cards, and enrollment CTAs. Lights up rich @wabbit/tome-lms integrations when the layer is present.

• Course Card

  Displays a single course with image, title, instructor, and enroll CTA. Fully static — no @wabbit/tome-lms peer required.

  course-card

• Lesson List

  Ordered list of course lessons with status, duration, and module grouping. Fully static — no @wabbit/tome-lms peer required.

  lesson-list

• Progress Bar

  Displays learner progress through a course or module. Fully static — no @wabbit/tome-lms peer required.

  progress-bar

• Quiz Summary

  Displays quiz results with score, pass/fail status, and optional breakdown. Fully static — no @wabbit/tome-lms peer required.

  quiz-summary

• Instructor Card

  Displays an instructor profile with avatar, bio, credentials, and social links.

  instructor-card

• Enrollment CTA

  High-conversion enrollment section with price, features, and enroll button. Fully static — no @wabbit/tome-lms peer required.

  enrollment-cta

Blog and archive listings, post heroes, related posts, and the editorial long-form set (opener, bridge, sidenote, figure, colophon, footnotes). Lights up rich @wabbit/tome content integrations when present.

• Blog

  Renders an optional heading/richtext header and a "View All" link row for a blog section. The collection query, category filter, sort, and manual-selection fields are captured but not rendered by this block yet — post cards are left to the consuming site's data layer (see the comment in `Blog.tsx`).

  blog

• Archive

  Display a manually selected set of documents. The "collection" (query-driven) mode is not yet implemented — it renders nothing until a live collection query is wired in.

  archive

• Related Posts

  Display related posts from a manually curated selection. The "same categories" (auto) mode is not yet implemented — it renders nothing until a category-matched query is wired in.

  related-posts

• Post Hero

  VNGD post header with SITREP tactical styling, classification badge, author callsign, and accent-colored category tag

  post-hero

• Editorial Opener

  Full-bleed hero with asymmetric text placement, kicker, byline, and integrated media

  editorial-opener

• Editorial Bridge

  Structural pause with viewport-relative height and optional centered content

  editorial-bridge

• Editorial Sidenote

  Marginal annotation aligned to a body paragraph

  editorial-sidenote

• Editorial Figure

  Image figure with caption, credit, breakout modes, and duotone treatment

  editorial-figure

• Editorial Colophon

  Article footer with author bio, publication metadata, and credits

  editorial-colophon

• Editorial Footnotes

  Collected footnotes with back-link anchors and display mode options

  editorial-footnotes

Editorial/marketing layout blocks: compare columns, data heroes, editorial spreads, features, info and message panels, metric strips, split panels, status boards, and text reveals.

• Compare Columns

  Two labeled side-by-side columns for "A vs B" comparisons; the positive column receives an accent treatment.

  compareColumns

• Data Hero

  Hero section with overlay metadata fields and data display

  data-hero

• Editorial Spread

  Full-bleed banded section with a narrow metadata rail (left or right) beside a main content column. Sequence these with alternating appearance to produce the editorial F-system rhythm.

  editorialSpread

• Feature

  Versatile feature showcase with USP cards, images, metrics, and multiple layout variants.

  feature

• Info Panel

  Prose content with key-facts sidebar panel and optional sticky behavior

  info-panel

• Message Panel

  Styled message callout with priority level, source attribution, and timestamp

  message-panel

• Metric Strip

  Horizontal metrics display with labeled values, deltas, and optional summary prose

  metric-strip

• Split Panel

  Split layout with image, body text, and optional data sidebar

  split-panel

• Status Board

  Card grid with status indicators, categories, and optional image thumbnails

  status-board

• Text Reveal

  Scroll-triggered word-by-word text reveal animation with configurable max width.

  text-reveal

Frames user content as transmission, record, or intel product: comm intercepts, comms transcripts, classification banners, log headers, redaction, system alerts, ambient audio, and threat panels.

• Comm Intercept

  Intercepted transmission card with signal-quality and encryption state variants.

  dispatchCommIntercept

• Comms Transcript

  Multi-line comms log rendered as a standard readout, intercepted record, or literary quote block.

  dispatchCommsTranscript

• Classification Banner

  Full-width classification level banner for restricted, secret, or declassified content.

  dispatchClassificationBanner

• Log Header

  Structured log entry header scoped to a ship, personal journal, or mission record.

  dispatchLogHeader

• Redacted

  Censored-content block rendered inline, as a paragraph, as a panel, or over an image.

  dispatchRedacted

• System Alert

  Ship system alert notification covering hull breach, quantum anomaly, comms failure, and all-clear states.

  dispatchSystemAlert

• Ambient Audio

  Ambient audio player block themed to comms chatter, engine hum, or alert tones.

  dispatchAmbientAudio

• Threat Panel

  Tactical threat-indicator panel in full or compact display modes.

  dispatchThreatPanel

Operational-console data display: asset and personnel cards, metric grids, objective lists, phase markers, progress bars, stat strips, map legends, and sensor readouts.

• Asset Card

  Displays a labeled asset with horizontal, vertical, or side-by-side comparison layouts.

  readoutAssetCard

• Personnel Card

  Renders personnel entries as an inline strip or a structured grid of avatar cards.

  readoutPersonnelCard

• Metric Grid

  Lays out labeled numeric metrics in a four-, three-, or two-column grid.

  readoutMetricGrid

• Objective List

  Lists operational objectives in a flat standard view or a phased step-through view.

  readoutObjectiveList

• Phase Marker

  Marks a current phase with standard, color-coded, or compact indicator treatments.

  readoutPhaseMarker

• Progress Bar

  Visualizes completion as a single bar, a stacked multi-value bar, or a segmented track.

  readoutProgressBar

• Stat Strip

  Presents a row of key statistics in standard, full-bleed breakout, or compact form.

  readoutStatStrip

• Map Legend

  Renders a map legend inline as a horizontal strip or anchored in a sidebar column.

  readoutMapLegend

• Sensor Readout

  Displays live-style sensor data as a contacts table or a system-status panel.

  readoutSensorReadout

Editorial long-form reading kit: drop caps, epigraphs, footnotes, chapter dividers, series nav, anchors, accordions, tabs, callouts, asides, key facts, image grids, data tables, spoilers, and cross-links.

• Drop Cap

  Decorative opening letter for article leads, with optional accent color.

  longformDropCap

• Epigraph

  Pull quote or prefatory verse set apart before a chapter or article opens.

  longformEpigraph

• Footnotes

  Inline citation list rendered at the foot of a section, optionally grouped by category.

  longformFootnotes

• Chapter Divider

  Visual break between major sections — ornamental rule, numbered heading, or symbol mark.

  longformChapterDivider

• Series Nav

  Previous/next navigation for multi-part series, positioned as banner, card, or sidebar.

  longformSeriesNav

• Anchor Section

  Linkable section heading that registers itself in the page TOC jump-nav.

  longformAnchorSection

• Accordion

  Collapsible content panels for reference material, FAQs, or nested detail.

  longformAccordion

• Tabbed Content

  Tabbed panels for parallel content sets — underline or pill tab style.

  longformTabbedContent

• Callout

  Highlighted aside panel keyed to tone — tactical warning, informational note, lore detail, or log entry.

  longformCallout

• Aside

  Marginal annotation that floats left or right of the prose column, or sits inline.

  longformAside

• Author Aside

  Author attribution block with avatar and bio, indented or overlay-positioned.

  longformAuthorAside

• Key Facts

  Scannable stat or fact list surfaced as sidebar panel, full-width strip, or compact inline row.

  longformKeyFacts

• Image Grid

  Multi-image layout in two-column, three-column, asymmetric, or masonry arrangement.

  longformImageGrid

• Data Table

  Structured data table — standard column layout, breakout full-width, or side-by-side comparison.

  longformDataTable

• Spoiler

  Hidden content revealed on interaction — blurred overlay or redacted-text treatment.

  longformSpoiler

• Cross Link

  Editorial link card connecting to a related article or series entry — standard or enhanced with preview.

  longformCrossLink

The catch-all library: heroes, content layouts, feature grids, cards, marquees, pull quotes, code, and lexical-embed blocks. 45 general-purpose blocks promoted from VNGD + Wabbit.

• Content

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

  content

• Content Two Column

  Two-column layout with text or media in each column

  content-two-column

• Post Content

  Rich text content block for blog posts with optional section title

  post-content

• Post Notice

  Callout or notice block for blog posts

  post-notice

• Prose Section

  Rich text prose with optional sidebar layout

  prose-section

• Pull Quote

  Highlighted quotation with attribution and optional portrait

  pull-quote

• Text Block

  Rich text content with optional links

  text-block

• Blog Hero

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

  blog-hero

• Chapter Hero

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

  chapter-hero

• Custom Hero

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

  custom-hero

• Image Hero

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

  image-hero

• Low Impact Hero

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

  low-impact-hero

• Medium Impact Hero

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

  medium-impact-hero

• Page Hero

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

  page-hero

• Study Hero

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

  study-hero

• Typography Hero

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

  typography-hero

• Bento Section

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

  bento-section

• Content With Bento

  Content section paired with a bento grid of media items

  content-with-bento

• Content With Corner Notch

  Two-column content block with decorative corner notch

  content-with-corner-notch

• Content With Marquee

  Rich content section with optional scrolling text marquee

  content-with-marquee

• Grid

  CSS grid container with configurable columns and gap

  grid

• Section

  Container section with background color and spacing controls

  section

• Spacer

  Vertical spacing with responsive visibility controls

  spacer

• Card

  Standalone card with media, text, and link options

  card

• Card Grid

  Grid of cards with media, text, and links

  card-grid

• Checklist

  Styled list with configurable icons and states

  checklist

• Feature Hero with Cards

  Hero section with feature cards grid and optional icon types

  feature-hero-with-cards

• Feature Masonry

  Masonry grid layout with mixed-size feature cards and CTA

  feature-masonry

• Feature with Icon Grid

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

  feature-with-icon-grid

• Feature with Large Media

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

  feature-with-large-media

• Feature with Three Steps

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

  feature-with-three-steps

• Image Marquee

  Scrolling marquee with text or images mode

  image-marquee

• Marquee

  Scrolling text marquee with speed and direction controls

  marquee

• Media Feature

  Split layout feature with video or image media and CTA button

  media-feature

• Project Info

  Case study or project information block with rich text description

  project-info

• Showcase

  Video showcase section with headline and background options

  showcase

• Skill Showcase

  Portfolio skill bars with profile and accent images

  skill-showcase

• Related Items

  Display related items from any collection

  related-items

• Signature

  Author signature block with optional avatar

  signature

• Code Block

  Syntax-highlighted code snippet

  code

• Custom Block

  Site-specific custom block container with type selector

  custom

• Lexical Banner

  Inline banner/callout block for use inside Lexical richText editors

  lexical-banner

• Document Embed

  Inline document embed block for use inside Lexical richText editors

  lexical-document-embed

• Entity Reference

  Inline entity reference block for use inside Lexical richText editors

  lexical-entity-reference

• Motion Text

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

  lexical-motion-text

General-purpose agency building blocks: about sections, contact blocks, team rosters, galleries, timelines, stat counters, split views, media embeds, and form blocks.

• About

  About section with headline, multi-column rich text, images, logos, counters, and optional CTA link.

  about

• Contact

  Contact section with heading, contact info, and optional message form

  contact

• Team Roster

  Member roster with portraits, roles, and biographical details

  team-roster

• Gallery

  Image gallery with multiple layout variants

  gallery

• Timeline

  Chronological timeline with dated entries

  timeline

• Stats

  Counter stats with optional headline and color scheme

  stat

• Stat Bar

  Animated percentage bar chart with configurable color scheme

  stat-bar

• Split View

  Multi-column layout with text, media, or form blocks per column

  split-view

• Media

  Image or video embed with optional caption and layout controls

  media

• Form Block

  Embeds a Payload form with optional intro content

  form

High-conversion marketing blocks: high-impact and feature heroes, CTAs, logo sliders, pricing tables, testimonials, FAQ accordions, and announcement banners.

• High Impact Hero

  Full-featured hero with headline, description, supporting images, reviews, marquee, and background options

  high-impact-hero

• Feature Hero

  Feature showcase with multiple layout variants (cards, steps, masonry, etc.)

  feature-hero

• Call to Action

  Headline + supporting text + action buttons with optional media

  cta

• Logo Slider

  Scrolling logo carousel for client or partner branding

  logo-slider

• Pricing

  Pricing plans section with subscription and project cards

  pricing

• Testimonial

  Display a testimonial from a testimonials collection

  testimonial

• FAQ

  Frequently asked questions with accordion answers

  faq

• Banner

  Alert banner with style variants (info, warning, error, success)

  banner

• Exhibit Wall

  Asymmetric museum gallery wall of hairline-framed real nested block renders

  exhibit

Sci-fi / signal-aesthetic themed content kit: accordions, ambient audio, anchors, asides, callouts, chapter dividers, classification banners, comm intercepts, transcripts, cross-links, data tables, drop caps, epigraphs, footnotes, image grids, key facts, log headers, map legends, metric grids, objective lists, personnel cards, phase markers, progress bars, redactions, sensor readouts, series navs, ship cards, spoilers, stat strips, system alerts, tabbed content, and threat panels. Themed visual companion to @wabbit/tome-dispatch + @wabbit/tome-longform.

• Signal Accordion

  Expandable accordion panels with single, stacked, or FAQ variants.

  signal-accordion

• Signal Ambient Audio

  Ambient audio indicator with comms, engine, or alert variants.

  signal-ambient-audio

• Signal Anchor Section

  Named anchor section header for in-page navigation.

  signal-anchor-section

• Signal Aside

  Floating or inline aside panel for supplementary content.

  signal-aside

• Signal Author Aside

  Author or editor note panel with indented or overlay layout.

  signal-author-aside

• Signal Callout

  Styled callout box with tactical, info, lore, or log variants.

  signal-callout

• Signal Chapter Divider

  Decorative chapter break with ornamental, numbered, or symbol variants.

  signal-chapter-divider

• Signal Classification Banner

  Classification level banner with restricted, secret, or declassified variants.

  signal-classification-banner

• Signal Comm Intercept

  Intercepted communications display with clean, degraded, or encrypted variants.

  signal-comm-intercept

• Signal Comms Transcript

  Multi-speaker comms transcript with callsign colors and optional redaction.

  signal-comms-transcript

• Signal Cross-System Link

  Cross-system link card with optional stat metrics.

  signal-cross-link

• Signal Data Table

  Structured data table with standard, breakout, or comparison variants.

  signal-data-table

• Signal Drop Cap

  Decorative drop-cap paragraph opener.

  signal-drop-cap

• Signal Epigraph

  Literary epigraph or quote block with attribution.

  signal-epigraph

• Signal Footnotes

  Numbered footnotes list with optional category grouping.

  signal-footnotes

• Signal Image Grid

  Multi-image grid with 2-col, 3-col, asymmetric, or masonry layouts.

  signal-image-grid

• Signal Key Facts

  Key facts panel with label-value pairs and optional status indicators.

  signal-key-facts

• Signal Log Header

  Log entry header with ship, personal, or mission variants.

  signal-log-header

• Signal Map Legend

  Map legend with colored symbol entries in horizontal or sidebar layout.

  signal-map-legend

• Signal Metric Grid

  Multi-metric grid with per-metric accent colors and delta indicators.

  signal-metric-grid

• Signal Objective List

  Mission objectives list with status tracking and optional phase grouping.

  signal-objective-list

• Signal Personnel Card

  Personnel roster card with inline or grid layout and status badges.

  signal-personnel-card

• Signal Phase Marker

  Phase or section marker with number badge.

  signal-phase-marker

• Signal Progress Bar

  Progress bar with single, stacked, or segmented variants.

  signal-progress-bar

• Signal Redacted

  Redacted content placeholder with inline, paragraph, panel, or image variants.

  signal-redacted

• Signal Sensor Readout

  Sensor contact display with IFF status, range, and bearing data.

  signal-sensor-readout

• Signal Series Nav

  Series navigation for multi-part content with banner, card, or sidebar layout.

  signal-series-nav

• Signal Ship Card

  Ship specification card with comparison support.

  signal-ship-card

• Signal Spoiler

  Spoiler-hidden content with blurred or redacted reveal style.

  signal-spoiler

• Signal Stat Strip

  Horizontal stat strip with delta indicators and per-stat colors.

  signal-stat-strip

• Signal System Alert

  System alert banner with hull breach, quantum, comms, or all-clear variants.

  signal-system-alert

• Signal Tabbed Content

  Tabbed content panel with underline or pill tab variants.

  signal-tabbed-content

• Signal Threat Panel

  Threat assessment panel with level indicator and status tracking.

  signal-threat-panel