duke of tokyo

Words & tables

CONTENT BLOCK SHOWCASE 01 / 04

Start here. These four staging-only pages demonstrate all 13 content blocks with real venue imagery and clearly labelled test cases. This is demonstration content, not a booking offer.

Review at desktop and phone widths. Check typography, spacing, links, media and keyboard interaction; compare the examples with their expected behaviour.

Explore the complete staging showcase

01 / Editorial rhythm

A great night starts with a song.

Gather your favourite people, find your chorus, and let the evening take its own shape. This paragraph includes italic emphasis and enough copy to inspect comfortable line lengths.

Unordered list: choose a song everyone knows.
Unordered list: give a new voice the microphone.

Ordered list: explore the showcase pages.
Ordered list: follow the sample links and inspect the results.

Heading hierarchy / H3

A closer look / H4

Small details / H5

The final note / H6

Small type, no extra spacing: captions and supporting details should remain readable.

Medium type, medium spacing: the standard reading experience for editorial copy.

Large type, large spacing: a statement with room to breathe.

02 / Links that lead somewhere

Internal rich-text link: Groups & Events

Document rich-text link: Amsterdam menu PDF

External rich-text link: Wagtail documentation

Note for the reviewer: the two buttons below are set to Primary and Secondary in the editor, and the first link points at an existing internal page. Compare what you see with the findings listed at the end of this page.

Primary / explore Groups & Events

Secondary / open Amsterdam menu PDF

Text + CTA / a complete invitation

The copy and button form one block. The button below uses the secondary style and an external destination with the new-tab option enabled.

Secondary / visit Wagtail

Text + CTA / text-only variant

No button was selected for this instance. Expect readable copy without an empty button or an unused gap.

03 / Tables with a purpose

The first table uses the maximum five columns, a header row and a deliberately long caption. At phone width, every column must remain reachable without making the entire page scroll sideways.

Page	Blocks	Focus	Try this	Expected result
01 / Editorial	Heading, text, CTA, text + CTA, table	Typography and links	Use the contents links	Correct section, readable layout
02 / Gallery	Image, slider, portrait pair, landscape pair	Media layout	Drag every gallery	Different crops, working captions
03 / Cards	Feature card, product box grid	Responsive composition	Compare 2, 3 and 4 columns	Cards reflow on small screens
04 / Media	Video, FAQ	Playback and accordions	Play clips and open answers	Visible media and usable controls

Five-column coverage map: every available content block is assigned to a clearly labelled staging page so a reviewer can check the complete editing and rendering experience.

Review pass	Desktop	Mobile
Layout	1440 px	375 px
Interaction	Keyboard and mouse	Touch and vertical scroll
Content	All labels visible	No clipped text

Header row and first-column headers / demonstration schedule, not bookable availability.

04 / Findings from this review

Everything below was observed on these published pages, not in preview. Each item states the editor setting and the result.

Internal page links render as a dead link. Rich text produces href="None" and buttons produce a URL ending in /None. Document and external links are unaffected.
Document links inside rich text point at a path that returns 404 on the public site. The same document works when linked from a button.
The Secondary style is ignored for the standalone button and for Text + CTA; both render in the primary colour. Product-card buttons do respect Primary and Secondary.
Feature-card image position is ignored: cards pinned to Image on right and Image on left render the opposite way, alternating by position instead.
An uploaded video file does not play. It is placed in a frame that the site security policy blocks. YouTube and Vimeo play correctly.
Galleries can be dragged and scrolled with a mouse or finger, but cannot be operated with a keyboard alone.
Everything else behaved as configured: headings and their contents list, text sizes and spacing, five-column and header-column tables, images and captions, portrait and landscape crops, 2, 3 and 4 column grids, and the questions on page 04.

Explore the complete staging showcase