duke of tokyo
Cards & collections
CONTENT BLOCK SHOWCASE 03 / 04
A collection of editorial cards and responsive grids. No products or prices on this page are bookable offers. Inspect image placement, wrapping, button styles and the single-column phone layout.
01 / Feature-card composition
EXPLICIT IMAGE POSITION
Pinned right / the opening act
Editor setting: Image on right. On desktop the photograph should be on the right, even though this is the first feature card. On mobile, content should stack cleanly.
EXPLICIT IMAGE POSITION
Pinned left / a change of scene
Editor setting: Image on left. Compare this with the previous card; the explicit placement should take precedence over automatic alternation.
AUTOMATIC ALTERNATION
Auto / the first perspective
This feature card uses the automatic layout. The next automatic card is separated by a text block to test whether alternation counts feature cards rather than every content block.
A short editorial interlude. This is a separate Text block between two automatic Feature cards.
Auto / the next perspective
This card has no pre-title and no CTA. Expect neither a blank eyebrow nor an empty button. Its image should alternate with the preceding automatic feature card.
02 / Two-column collection
Product box grid / 2 columns on wide screens. These two cards compare primary and secondary button styling.
03 / Three-column collection
Product box grid / 3 columns on wide screens. The middle card deliberately has no CTA; the last title is longer to test wrapping.
Take a breath
No CTA on this card: there should be no empty button.
A longer title that needs room to wrap naturally
Longer copy and a secondary button should fit without colliding.
Explore the gallery04 / Four-column collection
Product box grid / 4 columns on desktop, 2 at intermediate widths and 1 on phones. A fifth card demonstrates the second row.
The bridge
Text and image only, without a call to action.
Explore the complete staging showcase