Editorial Figure Strip

Block / Figure strip

Reference material can stay structured.

A modular figure grid for research notes, visual studies, and product storytelling.

Grid Before Ornament

The strongest Swiss compositions feel engineered before they feel styled. That translates directly into reusable spacing scales and predictable page rails.

Type As Main Structure

Swiss layouts treat typography as the architecture of the page. Headings, micro-labels, and data lines do the heavy lifting before any decorative layer appears.

Measured Density

The style is not merely sparse. It alternates dense blocks, quiet space, and rule-led segmentation to create authority without clutter.

EditorialFigureStrip is the journal system's structured image sequence. It lets a page present several related visuals with captions and summaries while keeping them inside the same prose rhythm as the surrounding article.

Installation

Purchase access, then open /account/install to issue a registry token.

Usage

import { EditorialFigureStrip } from "@/registry/swiss/blocks/editorial-figure-strip"

<EditorialFigureStrip
  eyebrow="Visual references"
  title="Reference material can stay structured."
  description="A modular figure grid for research notes and product storytelling."
  items={[
    {
      title: "Reference one",
      summary: "Short explanation for the image.",
      image: {
        src: "/image.jpg",
        alt: "Reference image",
        caption: "Caption and source",
      },
    },
  ]}
/>

Why This Block Exists

Articles often need more than one figure, but a raw gallery usually loses the narrative thread. This block keeps each image tied to a short summary and caption so readers understand why the figure is there.

• Use it when several visuals support one section of an article.
• Prefer it over a loose image grid when the figures need editorial framing.
• Avoid it when one image is enough or when the content needs a full slideshow interaction.

Examples

Three-Up Reference Strip

The standard usage is a short section title followed by several supporting figures with narrative context.

Block / Figure strip

Reference material can stay structured.

A modular figure grid for research notes, visual studies, and product storytelling.

Grid Before Ornament

The strongest Swiss compositions feel engineered before they feel styled. That translates directly into reusable spacing scales and predictable page rails.

Type As Main Structure

Swiss layouts treat typography as the architecture of the page. Headings, micro-labels, and data lines do the heavy lifting before any decorative layer appears.

Measured Density

The style is not merely sparse. It alternates dense blocks, quiet space, and rule-led segmentation to create authority without clutter.

Tighter Two-Up Layout

The block still works when the article only needs two strong images. The important part is that each item keeps title, summary, and caption together.

Visual references

A tighter strip for adjacent article sections.

The block still works with fewer items when the narrative only needs a couple of reference frames.

Grid Before Ornament

The strongest Swiss compositions feel engineered before they feel styled. That translates directly into reusable spacing scales and predictable page rails.

Type As Main Structure

Swiss layouts treat typography as the architecture of the page. Headings, micro-labels, and data lines do the heavy lifting before any decorative layer appears.

<EditorialFigureStrip
  eyebrow="Visual references"
  title="A tighter strip for adjacent article sections."
  items={items.slice(0, 2)}
/>

In Context

Use the strip after body copy when the narrative is ready to support its claims with visual material. It should feel like a section of the article, not a detached media gallery.

Use the figure strip after explanatory copy when the reader needs several related references without leaving the article rhythm.

Supporting figures

Images stay part of the article rather than a detached gallery.

Type As Main Structure

Swiss layouts treat typography as the architecture of the page. Headings, micro-labels, and data lines do the heavy lifting before any decorative layer appears.

Measured Density

The style is not merely sparse. It alternates dense blocks, quiet space, and rule-led segmentation to create authority without clutter.

Color As Signal

Red works because it is rare. In a product theme that means accents and warnings must be intentional, not merged into a generic highlight color.

Guidance

Curate, Do Not Dump

• Each image should earn its place.
• Limit the set to figures that advance the same idea.
• If the strip becomes a catch-all gallery, the summaries stop helping.

Write Supporting Copy With Intent

• title should identify the figure's role quickly.
• summary should explain why the reader should care.
• caption can hold source or production detail without crowding the summary.

Keep It In Article Rhythm

• Introduce the strip with a meaningful eyebrow and section title.
• Place it where the article benefits from a visual pause.
• If the page is primarily visual and not editorial, another gallery-oriented block may be more honest.

API Reference

EditorialFigureStrip Props

EditorialFigureStripItem

The block uses ProseSection, ProseFigure, ProseBody, and ProseCaption internally, so it inherits the same editorial spacing and figure treatment as the prose system.