# Feature stagger strip

> Three vertical feature columns arranged in a staggered descending rhythm with top margin offsets and hairline-bordered cards.

Canonical: https://patternpaste.com/pattern/feature-stagger-strip.html
Section: Features
Access: Included in Pattern Paste access.
Needs: Requires a block theme on WordPress 7.0 to 7.1. Classic themes and page builders are outside our supported setup. Adaptive patterns use the block theme’s colour, spacing and typography presets; styled variations declare their own colours or type.
Blocks: group, heading, image, paragraph
Keywords: features, stagger, offset, columns, cards

Promise: Identical markup in every theme.

---

## The signature moment: staggered descending cadence

Instead of standard horizontal card alignment, each of the three columns is progressively offset vertically (`0`, `var:preset|spacing|50`, and `var:preset|spacing|70`). This staggered step effect guides the reader's eye naturally from left to right through progressive pipeline phases, breaking the monotony of standard 3-box grids.

## What it inherits from your theme

- **Typeface.** Inherits all theme font styles for headings, stage labels, and body paragraphs.
- **Palette.** Section ground uses `base` (falling back to `white`), copy uses `contrast` (falling back to `black`). Cards use `role-plate` and `role-plate-text`.
- **Rules.** Card perimeter hairlines use `role-rule` falling back to `contrast`.
- **Spacing.** Card offsets and gutters draw directly from core spacing presets.

## What it decides for itself

- **Proportion.** Three equal columns (33.33%) with progressive top margin steps creating the cascade.
- **Typography hierarchy.** Section heading on `xx-large`, card headings on `large`, body copy on `medium` ladder rungs.

## What you change first

1. **Stage tags & titles.** Update the three progressive stages (`Stage 01 / Authoring` to `Stage 03 / Distribution`) to reflect your pipeline or product lifecycle.
2. **Media slots.** Add 4:3 screenshot or illustration assets to each card's image block.

## Included images

The copied markup includes WordPress Photo Directory example photographs. The public image URLs
keep the examples visible after pasting. Select an image or cover and choose
**Replace** to use your own Media Library files. See [image credits](/image-credits/)
for the sources and licenses. Pasting an image URL does not import a Media Library
attachment.