PDF Visual Blocks Reference

Complete reference for all 7 PDF visual block types: Metric Highlight, Comparison Columns, Flow Pipeline, Hub and Spoke, Pyramid, Hexagon Cluster, and Card Table. Covers data interfaces and configuration options for each block.

April 1, 2026

PDF visual blocks are content blocks designed for print-ready output. They render as static, structured layouts optimised for PDF generation and print distribution. Unlike the interactive visualisation blocks (which use D3, GSAP, or CSS 3D), PDF visual blocks use simple CSS layouts that render predictably across PDF engines.

Block Overview

Block ID	Label	Editor Component	Description
pdf-metric-highlight	Metric Highlight	app-neoarc-pdf-metric-highlight	Prominent callout cards for key statistics with optional icons and context text.
pdf-comparison-columns	Comparison Columns	app-neoarc-pdf-comparison-columns	Side-by-side columns comparing options with labelled items and indicators.
pdf-flow-pipeline	Flow Pipeline	app-neoarc-pdf-flow-pipeline	Sequential pipeline of steps connected by arrows, horizontal or vertical.
pdf-hub-spoke	Hub and Spoke	app-neoarc-pdf-hub-spoke	Central hub with radiating spoke items, each with optional edge labels.
pdf-pyramid	Pyramid	app-neoarc-pdf-pyramid	Layered pyramid diagram with colour-coded tiers from top to bottom.
pdf-hexagon-cluster	Hexagon Cluster	app-neoarc-pdf-hexagon-cluster	Honeycomb grid of hexagonal cells with title, description, and icon.
pdf-card-table	Card Table	app-neoarc-pdf-card-table	Structured data table with headers, rows, and optional caption.

Metric Highlight

Displays key statistics as prominent callout cards. Each metric shows a value, label, and optional context and icon.

Data Interface

interface PdfMetricHighlightMetric {
  value: string;
  label: string;
  context?: string;
  colour?: string;
  icon?: string;
}

interface PdfMetricHighlightData {
  metrics: PdfMetricHighlightMetric[];
}

Field	Type	Required	Description
value	string	Yes	The metric value to display (e.g. '99.7%', '1,245').
label	string	Yes	A short description of the metric (e.g. 'Uptime', 'Monthly Active Users').
context	string	No	Additional context text shown below the label (e.g. 'up 3.2% from last quarter').
colour	string	No	Accent colour for the metric card border or background.
icon	string	No	Icon name from the bundled icon library, displayed alongside the metric.

Comparison Columns

Side-by-side columns for comparing two or more options. Each column has a title, optional icon, preferred flag, and a list of labelled items with indicators.

Data Interface

interface PdfComparisonColumnsItem {
  label: string;
  value: string;
  indicator?: 'positive' | 'negative' | 'neutral';
}

interface PdfComparisonColumnsOption {
  title: string;
  icon?: string;
  isPreferred?: boolean;
  items: PdfComparisonColumnsItem[];
}

interface PdfComparisonColumnsData {
  options: PdfComparisonColumnsOption[];
}

Field	Type	Required	Description
options	PdfComparisonColumnsOption[]	Yes	Array of columns to compare. Each column represents one option.
options[].title	string	Yes	Column heading (e.g. 'Option A', 'Current State').
options[].icon	string	No	Icon displayed in the column header.
options[].isPreferred	boolean	No	When true, the column is visually highlighted as the recommended choice.
options[].items	PdfComparisonColumnsItem[]	Yes	Array of comparison items within the column.
items[].label	string	Yes	Item label (e.g. 'Cost', 'Performance').
items[].value	string	Yes	Item value (e.g. 'Low', '150ms').
items[].indicator	'positive' \| 'negative' \| 'neutral'	No	Visual indicator: positive (green), negative (red), or neutral (grey).

Flow Pipeline

A sequential pipeline of steps connected by directional arrows. Can be rendered horizontally or vertically.

Data Interface

interface PdfFlowPipelineNode {
  title: string;
  description?: string;
  icon?: string;
}

interface PdfFlowPipelineData {
  title?: string;
  direction?: 'horizontal' | 'vertical';
  nodes: PdfFlowPipelineNode[];
}

Field	Type	Required	Description
title	string	No	Optional pipeline title displayed above the diagram.
direction	'horizontal' \| 'vertical'	No	Layout direction. Defaults to 'horizontal'.
nodes	PdfFlowPipelineNode[]	Yes	Array of pipeline steps in order.
nodes[].title	string	Yes	Step title.
nodes[].description	string	No	Short description displayed below the step title.
nodes[].icon	string	No	Icon displayed inside the step node.

Hub and Spoke

A central hub element with radiating spoke items. Each spoke can carry an edge label describing the relationship to the hub.

Data Interface

interface PdfHubSpokeCenter {
  title: string;
  description?: string;
  icon?: string;
}

interface PdfHubSpokeSpoke {
  title: string;
  description?: string;
  icon?: string;
  edgeLabel?: string;
}

interface PdfHubSpokeData {
  center: PdfHubSpokeCenter;
  spokes: PdfHubSpokeSpoke[];
}

Field	Type	Required	Description
center	PdfHubSpokeCenter	Yes	The central hub element.
center.title	string	Yes	Hub title.
center.description	string	No	Hub description.
center.icon	string	No	Icon displayed in the hub.
spokes	PdfHubSpokeSpoke[]	Yes	Array of spoke elements radiating from the hub.
spokes[].title	string	Yes	Spoke title.
spokes[].description	string	No	Spoke description.
spokes[].icon	string	No	Icon displayed in the spoke.
spokes[].edgeLabel	string	No	Label on the connecting line between hub and spoke.

Pyramid

A layered pyramid diagram with colour-coded tiers. Layers are rendered from top (narrowest) to bottom (widest), representing a hierarchy or priority stack.

Data Interface

interface PdfPyramidLayer {
  title: string;
  description?: string;
  colour?: string;
  icon?: string;
}

interface PdfPyramidData {
  title?: string;
  layers: PdfPyramidLayer[];
}

Field	Type	Required	Description
title	string	No	Optional pyramid title displayed above the diagram.
layers	PdfPyramidLayer[]	Yes	Array of pyramid layers from top to bottom.
layers[].title	string	Yes	Layer title displayed in the centre of the tier.
layers[].description	string	No	Layer description displayed below the title.
layers[].colour	string	No	Background colour for the tier. Defaults to theme-appropriate shading.
layers[].icon	string	No	Icon displayed alongside the layer title.

Hexagon Cluster

A honeycomb grid of hexagonal cells. Each cell displays a title, description, and optional icon. Rendered as a static grid for print output.

Data Interface

interface PdfHexagonClusterHexagon {
  title: string;
  description: string;
  icon?: string;
}

interface PdfHexagonClusterData {
  title?: string;
  hexagons: PdfHexagonClusterHexagon[];
}

Field	Type	Required	Description
title	string	No	Optional cluster title displayed above the grid.
hexagons	PdfHexagonClusterHexagon[]	Yes	Array of hexagonal cells.
hexagons[].title	string	Yes	Cell title displayed at the top of the hexagon.
hexagons[].description	string	Yes	Cell description displayed below the title.
hexagons[].icon	string	No	Icon displayed above the title inside the hexagon.

Card Table

A structured data table with column headers, data rows, and an optional caption. Designed for presenting tabular data in print-ready format.

Data Interface

interface PdfCardTableData {
  caption?: string;
  headers: string[];
  rows: string[][];
}

Field	Type	Required	Description
caption	string	No	Optional table caption displayed above the table.
headers	string[]	Yes	Array of column header labels.
rows	string[][]	Yes	Array of row arrays. Each inner array contains cell values matching the headers.

PDF Rendering Notes

Consideration	Detail
No interactivity	PDF visual blocks have no hover, click, or animation effects. All states are rendered as static layouts.
Icon rendering	Icons are rendered as inline SVG elements for reliable PDF output. The icon name references the bundled icon library.
Colour handling	Colours are rendered as solid fills. Gradients should be avoided as PDF engines may not support CSS gradients consistently.
Page breaks	PDF visual blocks are designed to fit within a single page. Large blocks (many items) may need manual adjustment.
Print CSS	All blocks include print-specific CSS rules via @media print to ensure clean output.