# 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. Canonical: https://patternpaste.com/pattern/case-stack-panels.html Section: Gallery Access: Included in Pattern Paste access. Needs: 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. Also needs: 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. Blocks: button, buttons, group, heading, image, paragraph, patternpaste/stack Keywords: case study, portfolio, stack, cards, panels, photographs, pinned, scroll Promise: This variation embeds one of our blocks: install the companion plugin, then paste. --- ## 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. ## 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 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. ## 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 you change first 1. **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. 2. **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. 3. **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. 4. **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. 5. **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. 6. **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. 7. **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. 8. **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. ## 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](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.