Cover stair: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/cover-stair.html Core Patterns (https://patternpaste.com/patterns/) Cover (https://patternpaste.com/patterns/cover/) Catalogue access Standard # Cover stair Three tall portrait photographs in a row, each set lower than the last by the same step so their tops form a staircase, with a numbered label and a short title under each. The heading and lede sit in the space the staircase leaves at the top right. On a phone the photographs stack in one column and the steps drop away. Includes three replaceable example photographs. ## All patterns Search patterns Loading patterns… The signature moment ## The photographs step down the page The second column is padded down by one step and the third by two, so the photographs' tops form a staircase, and the whole row is pulled up under the heading so the first photograph rises beside it. The heading takes the space the staircase leaves over the second and third columns; its group is as wide as those two columns, so its left edge lines up with the second photograph. Theme handoff ## What comes from where ### Theme and pattern Inherits every colour, the typeface and the spacing scale. Decides the step, the portrait ratio, the 1.5rem gutter, the 1680px measure and the heading's two-column width. 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 Three tall portrait photographs in a row, each core/cover at 3/4, each column set lower than the last. A numbered label and a short title sit under each photograph; the heading and lede sit at the top right. ### The signature moment: the photographs step down the page The second column is padded down by one step and the third by two, so the photographs' tops form a staircase, and the whole row is pulled up under the heading so the first photograph rises beside it. The heading takes the space the staircase leaves over the second and third columns; its group is as wide as those two columns, so its left edge lines up with the second photograph. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits, what it decides Inherits every colour, the typeface and the spacing scale. Decides the step, the portrait ratio, the 1.5rem gutter, the 1680px measure and the heading's two-column width. Technical notesBlock mechanics, responsive behaviour and constraints ### The phone core/columns stacks below 782px, so the step is clamp(0rem, calc((100vw - 48.875rem) * 9), 12rem): zero wherever the columns stack, and the full 12rem a few pixels above it. The pull under the heading uses the same ramp. On a phone the photographs stack in one clean column with no stray offsets. ### Type never sits on a photograph The photographs carry no veil and no text. The heading (a bare clamp() display, 44px to 88px: its size is the composition), the lede (medium at 1.6), the labels (small) and the titles (x-large, on the ladder) sit on your page ground in your contrast. ### What a buyer changes first The three photographs: select a cover and choose Replace. Portrait photographs work best; the cover crops to 3/4. ### The Styled look variations/slate-and-bracken.html states its own colours and faces: a slate-blue ground (#283a4b) with chalk type (#ece9e1) and bracken orange (#e8995e) for the eyebrow and the day labels, which measures above 4.5:1 on the slate. Iowan Old Style (Palatino, Georgia) sets the headings over Helvetica. ### Included images The copied markup includes WordPress Photo Directory example photographs. The public image URLs keep the examples visible after pasting. Select a cover and choose Replace to use your own Media Library files. See image credits (https://patternpaste.com/image-credits/) for the sources and licenses. Questions ## Cover stair: common questions Does Cover stair need a plugin? No. It is built only from core WordPress blocks (column, columns, cover, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Cover stair match my theme? Choose by variation. Three steps takes your theme’s palette; Slate and bracken brings its own colours. How many variations does Cover stair have? 2: Three steps and Slate and bracken. 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 Cover stair free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 9.5KB of core-block markup, 6 blocks (column, columns, cover, group, heading, paragraph), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Subscribe to copy it, £49 a year (https://patternpaste.com/account/#plan) What you copy is yours forever. Not for you? We refund within 14 days. Back to Core Patterns (https://patternpaste.com/patterns/) 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 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)Editorial Article footer The close of an article: a portrait of the author beside their name, the biography under both inside a currentColor slip held to the middle half of the measure, and the previous and the next post hanging off the two outer edges so the section reads as a doorway rather than a footer. The name, the biography and the two neighbours are dynamic core blocks, so they are the post's own and the preview here is sample data; the portrait is an ordinary image block you swap for your author's own. The previous and next links only resolve on a single post template, which is where this pattern belongs. (https://patternpaste.com/pattern/article-footer.html)Call to action Callout response clock A call-out section where the day is drawn to scale: a label, heading and a call button over one framed bar of three segments whose widths are their hours, 8am to 6pm, 6pm to midnight and midnight to 8am. Each segment carries its hours, how long we take to arrive at display size and the call-out fee under a hairline, and one line under the bar gives the hourly rate after that. On a phone the bar stacks into three rows that still name their hours. States no colour and no font of its own. (https://patternpaste.com/pattern/callout-response-clock.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 Cover Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks column, columns, cover, group, heading, paragraph Presets spacing 4, color 5, font-size 3 WordPress 7.0+ Continue exploring ## Next in Cover Explore all 16 Cover patterns (https://patternpaste.com/patterns/cover/)Also in Gallery (https://patternpaste.com/patterns/gallery/) Shot in Twenty Twenty-Five Cover No plugin needed ### Cover seams Three full-bleed photographs stacked edge to edge, each a chapter, with a numbered plate straddling every seam: half on one photograph and half on the next, alternating left and right, and the last plate stepping off the third photograph onto your theme's paper. Cover Preview pattern (https://patternpaste.com/pattern/cover-seams.html) Shot in Twenty Twenty-Five Cover No plugin needed ### Cover triptych One landscape photograph cut into three tall panels hung side by side with a gap of your page between them: each panel is a cover at exactly a third of the picture's shape, focused on its own third, so the image runs on across the gaps. Cover Preview pattern (https://patternpaste.com/pattern/cover-triptych.html) Shot in Twenty Twenty-Five Cover No plugin needed ### Cover veil A full-bleed cover whose photograph is reduced to grain behind a display headline by a heavy veil of your theme's contrast colour. Cover Preview pattern (https://patternpaste.com/pattern/cover-veil.html)