Visual component test bench
Internal test post exercising every typed visual component. Not for public reading. Will be unpublished after the renderer pass lands.
This post is a renderer fixture. Each section below sits next to a visual component so the dispatcher, the spacing, and the typography can be checked against real chrome.
Below, a stat block.
Some prose between visuals to confirm the prose-blog rules still apply when the renderer interleaves chunks. Domine body type, generous line height, measured line length capped at roughly 68 characters. Anchor links should remain the brand teal.
A second-level heading
Heading should render in Rethink Sans. The space above it tightens at the start of a chunk because the prose-blog rules apply per chunk. We will tune that as we go.
Process flow follows. Flows can be horizontal on desktop and stack vertically on mobile.
A note in the margin to flag something the reader might miss.
A sidebar annotation — gutter marginalia on desktop, collapsible on mobile.
After the chapter break we test the image compare slider. Use the keyboard arrows to verify accessibility — left/right adjust by 5%, Home and End jump to the extremes.
A standalone counter, useful for landing a single number with weight.
A cinematic quote callout — cinematic image with the quote overlaid in the dark gradient.
A flip card — hover or focus to flip; click works on touch.
An inline image, default width matched to the prose column.
A wider inline image breaking out of the prose column.
A bento grid for related ideas.
A marquee for a credentials or partner strip.
Typography motion
Five typography motion patterns. Cycle, flip, hover swap, scroll-revealed wave, and per-letter cascade.
And a closing CTA. CTAs in this publication are honest next steps, never marketing veneer.
About the author
Greg Zatulovsky, CPA
Founder & CEO, PF TECH · 15+ years in non-profit finance, operations & technology
Greg founded PF TECH to give Canadian non-profits access to the same operational infrastructure as the private sector — without the overhead. He writes about AI adoption, financial management, and the practical realities of running a mission-driven organisation.
