Steps cards: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/steps-cards.html Core Patterns (https://patternpaste.com/patterns/) How it works (https://patternpaste.com/patterns/steps/) Free Standard # 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. ## All patterns Search patterns Loading patterns… Start here ## What to change first - 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. - 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. - 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. - Choose the ruled variation when the surrounding page already has enough boxes. 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. Theme handoff ## What comes from where ### 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. ### Set by this pattern 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. Full pattern notes ## Why it works, and how it is built Open a topic for the complete design reasoning, editing guidance and implementation notes. Design rationaleComposition, intent and nearest alternatives ### Overview A photographic process in four plated steps, shown with an interior studio's journey from first ideas to handover. The image tops stay level while the card feet descend. Both the plated and open ruled versions include the same photos. ### 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. Make it yoursVariations and the edits to make first ### 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 - 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. - 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. - 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. - Choose the ruled variation when the surrounding page already has enough boxes. Theme behaviourInheritance, fixed decisions and contrast ### 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. ### 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. Technical notesBlock mechanics, responsive behaviour and constraints ### 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. Questions ## Steps cards: common questions Does Steps cards need a plugin? No. It is built only from core WordPress blocks (group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will Steps cards match my theme? Choose by variation. Plated stair and Ruled stair take your theme’s palette; Cloud and teal, Mend and Spur bring its own colours. How many variations does Steps cards have? 5: Plated stair, Cloud and teal, Mend, Spur and Ruled stair. Each is its own markup; choose one in the toolbar above the preview before you copy. Can I use my own images? Yes. Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Is Steps cards free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription. Back to Core Patterns (https://patternpaste.com/patterns/) ### Free pattern Copy it and paste it straight into the block editor. It is yours to keep and edit. Its Styled looks come with a subscription. Read the markup Catalogue access ### £49 a year All patterns, variations and theme downloads. What you copy is yours forever. Not for you? We refund within 14 days. Subscribe, £49 a year (https://patternpaste.com/account/#plan) Sign in (https://patternpaste.com/account/) Everything you copy is yours to keep, forever, on any site; access to the rest of the library runs while you subscribe. Not for you? Tell us within 14 days of a payment and we refund you. After that, cancelling stops the next renewal and access runs to the end of the year you have paid for. Prices are in pounds and are the full price in the UK, the US and eleven other countries; elsewhere the checkout adds your local VAT or sales tax. The terms name every country. #### Pair with Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Hero Hero aperture An opening section on your theme's own paper: a tracked line, a display headline, one short paragraph on a reading measure, and then a picture that stops short of the edge on every side. The signature is the margin: the image is a window cut in the page rather than a band across it, and the paper around it is what you notice. A small opaque plate in the picture's bottom-right corner carries the caption, so no type ever sits on the photograph. The still-image version includes an example photograph; select your own clip for the video version. States no colour and no font of its own. (https://patternpaste.com/pattern/hero-aperture.html)Timeline Availability calendar The next six months at a glance, as a wall planner of month tiles: each tile gives the year, the month at display size and a status with a small square mark. An open month carries a heavy top rule and a filled mark, a nearly full one a heavy rule and names the days left, and a booked month is struck through with an empty mark. A short line on how dates are held and one underlined link sit beside the heading. States no colour and no font of its own. (https://patternpaste.com/pattern/availability-calendar.html) #### Before you paste 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. How we test patterns (https://patternpaste.com/how-we-test/) Sample images stay in the copied blocks. Replace them in WordPress; pasting does not upload them to your Media Library. Video variations need your own clip. Image credits (https://patternpaste.com/image-credits/). ## Specifications Section How it works Access Free Plugin None, core blocks only Variations 5 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks group, heading, image, paragraph Presets color 5, spacing 5, font-size 3 WordPress 7.0+ Continue exploring ## Next in How it works Explore all 9 How it works patterns (https://patternpaste.com/patterns/steps/) Shot in Twenty Twenty-Five How it works No plugin needed ### First visit to scale What happens at a first appointment, drawn to scale: a bar of the whole appointment split into three solid segments whose widths are each step's share of the minutes, a scale line under it, then the three steps at the same widths, stacking on a tablet and a phone, with a title and a line each, and a closing note with one button. How it works Preview pattern (https://patternpaste.com/pattern/first-visit-to-scale.html) Shot in Twenty Twenty-Five How it works No plugin needed ### Steps cover stair A full-bleed cover with a heavy veil of your theme's contrast colour over the photograph, a display headline at the top left and three numbered steps set as a stair: each step a huge numeral, a short title and one line under a hairline rule, every column starting lower than the one before, so the steps descend down and to the right across the photograph. How it works Preview pattern (https://patternpaste.com/pattern/steps-cover-stair.html) Shot in Twenty Twenty-Five How it works No plugin needed ### Process delivery manifest A three-phase handoff unfolds through nested document frames: the brief contains the proof, and the proof contains the final delivery. How it works Preview pattern (https://patternpaste.com/pattern/steps-delivery-manifest.html)