The BaselStandard
Purchase the Edition

Editorial Figure Strip

Multi-figure editorial block for reference imagery, research notes, and visual storytelling.

LLM handoff

Copy a concise page brief or the full MDX source without digging through the docs shell.

Block / Figure strip

Reference material can stay structured.

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

Black and white photograph of a 1950s family sedan parked in side profile on a quiet street.
Chrome And Curve

A sedan profile gives wide crops real structure. The form is simple enough to hold a card or hero without drifting into generic stock imagery.

A 1950s family sedan shown in side profile on a quiet street. The long body line gives wide crops a calm structure that still feels grounded in a real object.
Black and white photograph of a 1950s rotary telephone on a simple desk.
Desk Objects With Weight

The telephone keeps the composition direct. The handset, dial, and cord give smaller frames enough detail without making them noisy.

A rotary desk telephone set on a simple work surface. The handset, dial, and coiled cord give tighter editorial crops enough density without making them noisy.
Black and white photograph of a 1950s tabletop radio viewed straight on.
Knobs, Dials, And Density

The radio reads well when the layout needs a denser still life. Its grille and controls keep the surface active while staying orderly.

A tabletop radio viewed straight on. The grille, dial, and cabinet give the journal and docs a quieter still-life object with clear mechanical detail.

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

Install
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: "/editorial/archive/tabletop-radio.png",
        alt: "Black and white photograph of a 1950s tabletop radio.",
        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.

Black and white photograph of a 1950s family sedan parked in side profile on a quiet street.
Chrome And Curve

A sedan profile gives wide crops real structure. The form is simple enough to hold a card or hero without drifting into generic stock imagery.

A 1950s family sedan shown in side profile on a quiet street. The long body line gives wide crops a calm structure that still feels grounded in a real object.
Black and white photograph of a 1950s rotary telephone on a simple desk.
Desk Objects With Weight

The telephone keeps the composition direct. The handset, dial, and cord give smaller frames enough detail without making them noisy.

A rotary desk telephone set on a simple work surface. The handset, dial, and coiled cord give tighter editorial crops enough density without making them noisy.
Black and white photograph of a 1950s tabletop radio viewed straight on.
Knobs, Dials, And Density

The radio reads well when the layout needs a denser still life. Its grille and controls keep the surface active while staying orderly.

A tabletop radio viewed straight on. The grille, dial, and cabinet give the journal and docs a quieter still-life object with clear mechanical detail.

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.

Black and white photograph of a 1950s family sedan parked in side profile on a quiet street.
Chrome And Curve

A sedan profile gives wide crops real structure. The form is simple enough to hold a card or hero without drifting into generic stock imagery.

A 1950s family sedan shown in side profile on a quiet street. The long body line gives wide crops a calm structure that still feels grounded in a real object.
Black and white photograph of a 1950s rotary telephone on a simple desk.
Desk Objects With Weight

The telephone keeps the composition direct. The handset, dial, and cord give smaller frames enough detail without making them noisy.

A rotary desk telephone set on a simple work surface. The handset, dial, and coiled cord give tighter editorial crops enough density without making them noisy.
<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.

Black and white photograph of a 1950s rotary telephone on a simple desk.
Desk Objects With Weight

The telephone keeps the composition direct. The handset, dial, and cord give smaller frames enough detail without making them noisy.

A rotary desk telephone set on a simple work surface. The handset, dial, and coiled cord give tighter editorial crops enough density without making them noisy.
Black and white photograph of a 1950s tabletop radio viewed straight on.
Knobs, Dials, And Density

The radio reads well when the layout needs a denser still life. Its grille and controls keep the surface active while staying orderly.

A tabletop radio viewed straight on. The grille, dial, and cabinet give the journal and docs a quieter still-life object with clear mechanical detail.
Black and white photograph of a 1950s metal desk fan on a plain surface.
Airflow And Repetition

The desk fan gives wide frames a clear rhythm. Repeated metal lines make it useful anywhere the layout wants calm motion without illustration.

A metal desk fan on a plain surface. The circular guard and repeated blades hold up well in wide hero and card crops where the layout needs rhythm.

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

PropTypeRequiredNotes
eyebrowstringyesSmall section label.
titlestringyesSection headline for the strip.
descriptionstringnoOptional intro copy above the figures.
itemsEditorialFigureStripItem[]yesArray of figure entries.

EditorialFigureStripItem

FieldTypeRequiredNotes
titlestringyesFigure label inside the item card.
summarystringyesShort editorial explanation.
image.srcstringyesImage URL.
image.altstringyesAccessible alt text.
image.captionstringyesFigure caption text.
image.sourceLabelstringnoOptional source label.
image.sourceUrlstringnoOptional source link.

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

Previous: Editorial Article CardNext: Editorial Resource List