# Steps cards > Four photographic process cards with level tops and descending feet. Each plate carries a replaceable WordPress image, a tracked step label, a short title and one sentence. The grid stretches the cards while their bottom margins draw the stair, reflowing into pairs and then a single column as the page narrows. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/steps-cards.html Section: How it works Access: Free, and free to keep. 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: steps, process, how it works, stages, cards, stair, photographs, interiors ## Variations (5) ### Plated stair (the default) Identical markup in every theme. Four photo-led plates on your base ground, with level image tops and bottom edges stepping down from left to right. The photos are included and editable in WordPress. ### Cloud and teal This variation states its own colours and states its own type: identical in every theme. States a cloud-grey ground, white cards with a teal top edge, deep teal-navy ink and a teal booking button, set in Avenir Next, for a clinic: book, assess, treat, in three descending cards. ### Mend This variation states its own colours and states its own type: identical in every theme. The Mend physio set: a mint band, deep teal ink, three white cards with apricot top rules stepping down, each opening on an active-life photograph, a teal 6px-corner button and an underlined call link, all in Avenir Next. ### Spur This variation states its own colours and states its own type: identical in every theme. The Spur electrician and plumber set: a switch white ground, four white 4px-corner cards on conduit hairlines stepping down, blue step labels, titles in Arial Black, a live blue call button and a cable black outline button in Arial. ### Ruled stair Identical markup in every theme. The same photographs and descending feet, with a heavy top rule replacing each enclosing box. More open space around the process, with the same order and image crops. --- ## The signature moment: the feet descend Each card is a stretched grid child. Descending bottom margins lift the first three feet above the last, so the row's bottom edge draws a stair independently of the length of each description. The tops and 4:3 image crops stay aligned. The grid reflows into pairs and then one card per row as the available width narrows. Fluid drops become shallower on smaller screens. ## What it inherits from your theme Typeface, heading sizes, base and contrast colours, and vertical spacing presets. Every border is `currentColor`. Headings follow the theme's ladder with clamp fallbacks. Narrow card descriptions keep a reading-size clamp. ## What it decides for itself A full-width band holds a 1240px measure. The grid has 16rem minimum tracks and fluid gutters. Cards carry fluid horizontal padding, preset vertical padding, and a matching 4:3 photograph above the tracked step label, title and sentence. The photos crop with `cover`; text remains on the page ground. ## The variation **Ruled stair** removes the enclosing sides and bottom border, retaining a heavy top rule and the same photos and bottom-margin descent. Its feet are open space rather than the visible lower edges of boxes. ## What to change first 1. Replace the four photos with examples of your own process and update their alternative text. The supplied interior details illustrate discovery, a natural palette, finishing touches and a completed workspace. 2. Edit the step labels, titles and short descriptions. Keep the sequence in document order so it remains clear on a phone and to screen readers. 3. Duplicate or delete cards and adjust the descending bottom margins evenly. The final card is the baseline; setting all drops to zero makes a level row. 4. Choose the ruled variation when the surrounding page already has enough boxes. ## Included images and core blocks The reviewed WordPress photographs from `assets/wordpress-images.json` are included in the copied markup as public HTTPS URLs, without foreign attachment IDs. Previews use the same sources. Replace them with the Image block controls. Only core group, image, heading and paragraph blocks are needed. No plugin, custom CSS or JavaScript. ## Contrast and display type Headings use the theme's size ladder. Card body copy deliberately uses `clamp(0.9375rem, 1.05vw, 1rem)` to remain readable in a 16rem track. Step labels are incidental tracked markings. Body copy and labels must reach 4.5:1; large headings must reach 3:1. Text colour resolves against the theme ground, never against the photograph.