Klaus W
WorkBlock Showcase
000 · Reference · Internal

Block
Showcase

A living reference page that renders every major case study content block, use it to preview layout, spacing, and typography before writing real copy.

Purpose
Component reference
Blocks
19 content types
Format
Major case study
Status
Dev / internal
01 · Brief

Text blocks
and metrics

The prose block is the workhorse, one or more paragraphs of body copy. Blank lines in the source create separate paragraphs.

Indented lines (four leading spaces) render as nested body lines, useful for lists or sub-points without breaking the editorial flow.

19
Block types
6
Sections
3
Stat variants
1
Living page

Every block on this page maps to a typed content object, no one-off markup in the renderer.

Block Showcase · Reference note
02 · Research

Structured
findings

Research-heavy case studies use findings cards, annotations, and two-column layouts to separate evidence from narrative.

Block · findings
Sample finding card illustration
Friction cards
Numbered research insights with a label, title, and body. Best for interview themes or audit observations.
Block · annotation
Inline notes
See the annotation below, a lighter-weight aside for scope notes, caveats, or designer commentary.
Block · twoCol
Side-by-side
Pairs two labelled columns, useful for comparing methods, audiences, or before/after states.
↳ noteAnnotations render with a ↳ note prefix. Use them for asides that shouldn't compete with the main narrative.
Left column
Two-column blocks accept any number of items but read best with two parallel points.
Right column
Each item has a mono-style label and a body paragraph beneath it.
03 · Concept

Artifacts
and specimens

Concept sections often pair narrative with visual evidence, built-in artifacts, color/type specimens, and decorative ornaments.

Block · artifact (audit-map)
The audit-map variant renders an experience journey diagram. Use it for research synthesis or service blueprints.Built-in SVG artifact
Background
color.bg
Surface
color.surface
Primary
color.primary
Accent
color.accent
Header
color.header-bg
Muted text
color.text-muted
Heading · Fraunces

Editorial headline

Body · Prompt

Body copy at base size, used for narrative paragraphs, captions, and supporting detail across case study sections.

Mono · Syne

01 · BRIEF · ROLE · DURATION

04 · Craft

Media
and grids

Craft sections showcase visual output, image pairs, component inventories, and the second artifact variant.

Sample single image block showing a quiz flow diagram
image block, full-width figure with optional caption.Sample credit link
Sample small image block
image block with size: sm.
12
Atoms
Buttons & badges
8
Molecules
Cards & stamps
5
Organisms
Hero & nav
2
Templates
Case study
Platypus illustration sample
imageGrid · item 1Credit on grid item
Brolga illustration sample
imageGrid · item 2
Australia Call cover
imageGrid · item 3 (three or more images)
Platypus illustration sample
imagePair · size sm · left
Brolga illustration sample
imagePair · size sm · right
Platypus illustration sample
imagePair · left item with captionCredit on pair item
Brolga illustration sample
imagePair · right item with caption
Block · artifact (token-hierarchy)
The token-hierarchy variant shows a design token tree. Use it for design-system or theming case studies.Built-in SVG artifact
05 · Build

Process
and media

Build sections document how something was made, process steps, highlighted decisions, and screen recordings.

01
process block
Numbered columns for phased work, discovery, design, build, handoff.
02
callout block
See the callout below for highlighted insights, principles, or role summaries.
03
video block
Embeds a video with poster, controls, alt text, and a caption.
04
prose block
Back to narrative paragraphs to tie the evidence together.
video block, src, poster, alt, and caption are all required.
06 · Outcome

Results
and reflections

19
Blocks rendered
Every MajorContentBlock variant appears at least once on this page.
2
Artifact variants
audit-map and token-hierarchy, both built-in SVG diagrams.
1
Reference URL
Visit /work/block-showcase any time to preview block styling.

The outcome section closes the narrative arc. Pair outcome metrics with reflections for a complete ending.

  1. 01prose, body paragraphs with optional indentation.
  2. 02stats · pullquote · findings · annotation · twoCol, research and context blocks.
  3. 03artifact · ornament · colorSpecimen · typeSpecimen · componentGrid · image · imagePair · imageGrid, visual blocks.
  4. 04process · callout · video, build and evidence blocks.
  5. 05outcomes · reflections, closing blocks for results and learnings.