Sticky image rail

Use it when

The claim holds position on the left while the visit steps scroll past on the right. The only pattern where an image column is the primary content and the copy is the fixed reference.

Category

Process

Layout archetype

Sticky rail

Page position

middle (derived)

Purpose

explain (derived)

Field

light (derived)

Interaction

sticky (derived)

Motifs

Elevation frame, Sequence mark, Register

Content it requires

• Three to five steps
• One image per step
• A stamp, a term, and two lines per step
• One call to action

Do not use it when

• Needs at least three steps. With two the section is not tall enough for the rail to stick and the layout reads as broken.
• The rail is static below 900px, so the copy has to make sense read once at the top.
• Do not put a second sticky section anywhere near this one.

Variants

None. Colour swaps and mirrored alignment do not count as variants.

Implementation

src/components/patterns/ProcessImageRail.astro

---
import ProcessImageRail from '../components/patterns/ProcessImageRail.astro';
---

<ProcessImageRail />

Import directly. Do not route production through patternComponents.

Production usage

Not yet used on a production page. Nothing here has been proven in front of a customer.

Accessibility

• Verified at 360, 768, 1024, and 1440 with no horizontal overflow.
• No interactive controls beyond links and buttons inherited from the design system.
• Colour never carries meaning alone: every state marker is paired with text.
• Motion respects prefers-reduced-motion.