Case stack panels, Pattern Paste Canonical: https://patternpaste.com/pattern/case-stack-panels.html Interactive (https://patternpaste.com/interactive/) Stack (https://patternpaste.com/interactive/stack/) Catalogue access Needs plugin (https://patternpaste.com/docs/install-pattern-paste/) # Case stack panels Five case-study panels on a dark band: a short masthead, then five prints dealt over one another as you scroll, each one a photograph in a wide cinematic crop with its client, its year and one line of outcome on the plate beneath it. The block's own card is switched off, so each panel is the pale group the markup draws and nothing is added around the picture; the pile below the top card peeks deeper than the block's default and dims more gently, so what you are looking at reads as a stack of prints on a table rather than a run of cards. Type never sits on a photograph: the caption is always on the plate below the picture. Includes replaceable example images. Needs the companion plugin, which comes with your access; without it, or without motion, the masthead is followed by the five panels as a plain column, each picture above its own caption. States no colour and no font of its own. Start here ## What you change first - The photographs. Every panel includes an image block with an example photograph with the 21 by 9 crop already set. - The words. Each caption is a client-and-year line, one line of outcome and a short paragraph. - How many panels. Duplicate a panel group to add one, delete it to remove one; two is the floor. - The deck's width and the pile. "How wide the deck may get" is 820 here, with the peek, the depth, the shrink and the dim beside it in the block's inspector. - The plate. "Plate behind each card" is off here. - The masthead. The eyebrow, the heading and the line under it are ordinary core blocks outside the block, so they take your theme's own measure. - Motion. The inspector's motion switch turns the pin and the deal off and leaves the plain column. - The heading levels. The masthead is an h2 and each panel's outcome line is an h3, which is right for a section inside a page. The signature moment ## Five case-study panels, each a photograph with its caption on a plate, dealt over one another on the ink, with a deeper peek so the pile reads as a stack of prints patternpastePlate is false, so the block draws nothing: no padding, no ground, no hairline and no shadow. Each panel is exactly the group in the markup, and that group states its own opaque base ground with contrast ink on it, laid on a band that is the other way round. So a pale print lands on the ink, and the next one lands on that, and the peek at 34 pixels a level leaves four pale edges standing above the card on top instead of the block's 26. Four edges of that depth is the whole composition: it is what makes a pile of prints on a table rather than a run of cards being replaced. Theme handoff ## What comes from where ### From your theme - Typeface. - Palette. - Spacing. - The button. ### Set by this pattern - Every panel paints its own ground. - The caption's measure. - The caption's padding. - The type is all on the ladder. - The panels are written to a similar length. - The counter stays on. - The hand-off row is a sibling after the block. 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 Five case-study panels on an inverted band. A short masthead, then five pale prints dealt over one another as the section holds the screen: each one a photograph in a wide cinematic crop with its client, its year and one line of outcome on the plate beneath it. The third composite built on patternpaste/stack, and the only one that turns the block's own card off. ### The signature moment: five case-study panels, each a photograph with its caption on a plate, dealt over one another on the ink, with a deeper peek so the pile reads as a stack of prints patternpastePlate is false, so the block draws nothing: no padding, no ground, no hairline and no shadow. Each panel is exactly the group in the markup, and that group states its own opaque base ground with contrast ink on it, laid on a band that is the other way round. So a pale print lands on the ink, and the next one lands on that, and the peek at 34 pixels a level leaves four pale edges standing above the card on top instead of the block's 26. Four edges of that depth is the whole composition: it is what makes a pile of prints on a table rather than a run of cards being replaced. The veil follows from the same argument. The block lays the card's own ink over each buried level, and 16 per cent a level takes the fourth print most of the way to black. At 10 the buried panels are still photographs, dimmed just enough to sit behind the one being read, and the shrink at 4 rather than 5 keeps the fourth print the same kind of object as the first rather than a smaller component. Nothing here is a dial setting for its own sake: with the plate off there is no drawn card to carry the pile, so the pile has to be legible as paper. Type never sits on a photograph. The picture fills the top of the panel and the caption is on the plate below it, always, at every width, which is why the panel needs its own ground rather than the picture being the panel. ### Why this is not process-stack-steps process-stack-steps is the block's landing page: a numbered process, the block's drawn card, the counter, the defaults. Five differences, and each one follows from the first: - The plate is off, and that obliges the payload. With the plate on the block paints the theme's base as the card's ground and its contrast as the ink, so a deck is opaque wherever it lands. Off, whatever the author put in the card IS the card, and a pile of transparent cards shows every card through the one on top. Every panel here therefore states its own base ground and contrast ink as chains, and takes no padding of its own on the group: the picture has to reach the panel's edges, so the padding belongs to the caption and nowhere else. - The band is inverted. process-stack-steps is a light band with dark cards drawn on it. This one is contrast with base text, and the panels are the only light thing in it, which is what a print on a table looks like. It also settles the plate argument: on the ink, a panel that failed to paint its own ground would be invisible rather than merely wrong. - The cards are picture-led. A process card is an eyebrow, a heading, a paragraph and a meta line. A panel here is a photograph first and three lines of caption second, and the photograph is what the reader is dealt. - The pile is deeper and softer. Peek 34 against 26, dim 10 against 16, shrink 4 against 5. A process pile wants the step being read to dominate; a pile of prints wants the ones underneath to still be pictures. - The crop is 21 by 9, and it is not a taste. See below. Make it yoursVariations and the edits to make first ### What you change first - The photographs. Every panel includes an image block with an example photograph with the 21 by 9 crop already set. Use the block toolbar's "Fill cards from media library", which takes a multiple selection and deals it into the panels in order, and saves five trips through the modal. The crop is wide, so choose pictures whose subject is near the middle: the block fills the box and crops to cover it. - The words. Each caption is a client-and-year line, one line of outcome and a short paragraph. Keep the five to a similar length: while the section is pinned every panel is the height of the tallest, so one long panel makes four panels of empty ground. - How many panels. Duplicate a panel group to add one, delete it to remove one; two is the floor. The pin is patternpasteDeal screens per panel times one less than the count, so five is a section and twelve is ten screens of scrolling. Adding panels also adds height nowhere, because the deck is one card tall whatever the count. - The deck's width and the pile. "How wide the deck may get" is 820 here, with the peek, the depth, the shrink and the dim beside it in the block's inspector. Read the arithmetic above before you widen the deck: the picture's height is the deck's width times its crop, and a taller picture plus 136 pixels of pile is what a pinned screen cannot hold. Widen the deck and change the crop in the same move. - The plate. "Plate behind each card" is off here. Turn it on and the block draws its own card round every panel: its ground, its ink, a hairline, a shadow and its own padding, with your picture inset from the edges. That is a different composition, a run of mounted cards rather than a pile of prints, and if you take it you can delete the ground and ink each panel group states, because the block will be painting them. - The masthead. The eyebrow, the heading and the line under it are ordinary core blocks outside the block, so they take your theme's own measure. - Motion. The inspector's motion switch turns the pin and the deal off and leaves the plain column. The deal, the overshoot and the lean are beside it; the lean is never given to a touch screen, and the peek, the shrink and the depth are scaled down there whatever you set. - The heading levels. The masthead is an h2 and each panel's outcome line is an h3, which is right for a section inside a page. Check where this lands: if the page has no h1 above it, or the section sits under another h2, change the masthead's level in the block toolbar so the outline reads in order. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - Typeface. Nothing states a family anywhere. The masthead, the captions, the hand-off line and the button all take whatever your theme sets. - Palette. The band is your contrast with your base as its text; each panel is the pair the other way round. That is the one pair every block theme is obliged to keep legible, and it is why this section can be inverted at all. The caption's client-and-year line leads on role-label, which only our theme tool defines, and falls through to contrast everywhere else, because it sits on the panel's own pale ground. No accent slug appears in any rung. - Spacing. The band's padding, the gap between the masthead and the frame, the caption's vertical padding and the hand-off row are core spacing presets. - The button. It states a transparent ground, base for its label and currentColor for its hairline, because an ordinary filled button has not been derived against an inverted band. Its shape, its type and its hover are still the theme's. ### What it decides for itself - Every panel paints its own ground. Required, not chosen: see above. - The caption's measure. The caption group is constrained to 44rem and left aligned inside a panel that is 820 wide, so a 38-word paragraph stays at a readable measure instead of running the width of a photograph. - The caption's padding. Horizontal padding is a clamp(1.25rem, 2.5vw, 2rem) because it is padding inside a card; vertical padding is a spacing preset. The panel group itself takes none, so the picture is flush. - The type is all on the ladder. The masthead is x-large as a chain, the captions' outcome lines are large, the body copy and the hand-off line are medium, each with a tuned clamp() as its fallback. Nothing here is display type: the photographs are the scale in this section, so the words do not compete with them. The eyebrows are labels with their own floor and their own tracking. - The panels are written to a similar length. The live deck makes every card the height of the tallest, so a short panel would carry empty ground while the section is pinned. Every caption here is one label line, one outcome line and 36 to 39 words. - The counter stays on. It is the block's default and it earns its place here: with the plate off there is no drawn card to say how many are left, so the five two-digit steps in the frame's corner are the only count in the section. - The hand-off row is a sibling after the block. The introduction slot renders ABOVE the frame, and the point of this row is to be on the far side of it, so a full-bleed band does not end with nothing under it. It and the masthead are inset by the same max(clamp(1.25rem, 4vw, 4rem), calc((100% - 1600px) / 2)) the block uses for its own gutter, so all three line up. Technical notesBlock mechanics, responsive behaviour and constraints ### Why the crop is 21 by 9 and the deck is 820 This is the arithmetic that decided the composition, and it is worth writing down because it will decide any change a buyer makes. The block pins the section for one screen and the live deck is a grid: every card is the height of the tallest, and the finished pile is that height plus the peek times the depth, which is 34 times 4, or 136 pixels. check-motion measures the desktop cell at 1280 by 800, so a panel has about 660 pixels to live in, caption included. A picture that fills the panel's width is what spends it, and the picture's height is the deck's width times its crop: - at the deck's own default of 920 and a 16 by 9 crop the picture alone is 517 pixels, and with a three-line caption under it the panel is over 700: stack-deck-clipped, the rule that refuses a card too tall for the frame rather than cropping the author's copy; - at 1400, which the brief asked for first, the picture is 787 before a word is set; - at 21 by 9 and the default 920 the panel measures 604 in Twenty Twenty-Five and 678 in Twenty Twenty-Four, whose type and spacing scale are larger. The second one is 14 pixels over the frame, and it failed (measured 2026-09-05: pile from -6.58 to 807.42, stage from 0.42 to 800.42); - at 820 with the caption's vertical padding one preset step down, both themes are inside the frame with room to spare. So the deck is 820 rather than the 1400 of the first draft, the crop went wide across all five panels rather than three of them being 16 by 9 and two 3 by 2, and the two changes are the same decision: a wide deck and a tall crop cannot both be had inside a pinned screen, and a case-study panel reads as a print because the picture is wide, not because the deck is. The phone is not the binding case, which is worth saying because it usually is: at 390 the deck is the screen less its gutter, the picture is about 150 pixels and the caption about 300, so the panel is well inside the 708 the frame leaves once the full pile is allowed for. ### What needs the plugin This pattern embeds patternpaste/stack, a dynamic block registered by the companion plugin, which comes with your access. Install it before pasting, or the block shows the missing-block placeholder in the editor. With motion switched off in the block's inspector, the section is the plain column the markup already is: five panels in order, each a photograph above its own caption, with a gap between them and nothing hidden. With the plugin deactivated entirely, the front end shows the same thing: the masthead, the five panels as a plain column of core groups, then the hand-off row. Nothing you type lives in the block. The veil and the step counter are in the markup either way and paint nothing when there is no pile to veil or count. A visitor who has asked for reduced motion always gets the still column too. ### What is not proved How your crop lands. Every panel crops its picture to 21 by 9 and fills the box from the middle. Whether that is the right slice of a photograph is a judgement about that photograph, and no gate here can make it: a face at the top of a portrait frame will be cropped out. Look at the section with your own pictures in it at 390 as well as on a desktop. The coarse pointer. The mobile cell is measured with a fine pointer, because the harness's browser has no touch. On a real phone the block caps the depth at 3, scales the peek to 55 per cent and never leans, so the pile there is shallower than the one measured; nothing has read it on a real device. ### 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 (https://patternpaste.com/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment. 22KB of core-block markup, 7 blocks (button, buttons, group, heading, image, paragraph, patternpaste/stack), and nothing else: paste it into the block editor and it becomes editable blocks wearing your theme. Start free trial to copy (https://patternpaste.com/account/#plan) What you copy is yours forever. Cancel whenever. Back to the library (https://patternpaste.com/patterns/) Catalogue access ### £70 a year Save £50 Or £10 a month All patterns, variations and theme downloads. What you copy is yours forever. Cancel whenever. Start with three days of full access on sign-up, no card. Start free trial (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. Cancel any time; access runs to the end of the period you have paid for, and there is no pro-rata refund. 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. #### Use it for - Agency and studio case-study reels - Portfolio pages with a picture per project - Client work summaries on a dark band - Product launch recaps told project by project - Photography-led service pages #### 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)Contact Contact cover ledger A full-bleed contact cover: a display heading in the top left, and a ruled ledger of address, hours, phone and email in the far lower-right corner, label left and value right between hairline rules, with the photograph running between them. A heavy veil of your theme's contrast colour keeps every line legible whatever photograph you choose. The ledger drops under the heading on a phone. Includes a replaceable example photograph. States no colour and no font of its own. Ships with a short hand-off row on your theme's paper below it. (https://patternpaste.com/pattern/contact-cover-ledger.html) #### Before you paste Install the Pattern Paste plugin first, then paste. This section embeds one of its blocks: the plugin comes with your access, downloads from your account, and takes a minute. Paste without it and the section arrives as a plain stack of your headings, text and images, with none of the motion. How to install it (https://patternpaste.com/docs/install-pattern-paste/). Requires a block theme on WordPress 6.7 to 7.0. 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/). #### What's inside Blocks button, buttons, group, heading, image, paragraph, patternpaste/stack Core only NO Chains 64, deepest 3 rungs currentColor yes color base, black, contrast, role-label, white spacing 20, 30, 40, 60, 80 font-size large, medium, x-large Continue exploring ## Next in Interactive Explore all 36 interactive patterns (https://patternpaste.com/interactive/)Also in Gallery (https://patternpaste.com/patterns/gallery/)Also in Editorial (https://patternpaste.com/patterns/editorial/) Shot in Twenty Twenty-Five Features Features Needs plugin ### Services scrollspy index A text-led services section with a narrow numbered index beside five generous service chapters. 8 blocks Open preview (https://patternpaste.com/pattern/services-scrollspy-index.html) Shot in Twenty Twenty-Five Pricing Pricing Compare Needs plugin ### Pricing stack tiers Four pricing cards built as plan sheets: a numbered header, a large price beside a compact feature ledger, and a ruled footer. 8 blocks Open preview (https://patternpaste.com/pattern/pricing-stack-tiers.html) Shot in Twenty Twenty-Five How it works How it works Needs plugin ### Process stack steps Six process cards with oversized phase numbers, short editorial headlines and a ruled deliverables footer. 8 blocks Open preview (https://patternpaste.com/pattern/process-stack-steps.html)