Case study spread: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/case-study-spread.html Core Patterns (https://patternpaste.com/patterns/) Editorial (https://patternpaste.com/patterns/editorial/) Free Standard # Case study spread One project told in full on a dark slab: a label and a display headline, a large photograph with a smaller one lapping its lower corner and hanging below it, then three columns for the brief, what was done and what it became, the last closing on three big figures, and a client's line under a hairline. ## All patterns Search patterns Loading patterns… The signature moment ## A small photograph laps the corner of the large one and hangs below it, and the story ends on three figures A flex row of two items, the second lapping the first. The large 3:2 photograph and its caption take 75 percent; the smaller 4:5 photograph is fixed at 34 percent, pulled left over the large one by a negative margin and dropped by a top margin, so it overlaps the lower corner and hangs below it. Below, three columns for the brief, what was done and what it became; the last closes on 42, 3 and 64 set large with small words beneath. A client's line sits under a hairline at the foot. Theme handoff ## What comes from where ### From your theme - The typeface. - Your colours. - Your spacing. 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 One project told in full, the way a printed portfolio gives a job a spread: a headline, two photographs, then the brief, the work and the result side by side. It sits in editorial beside editorial-lap (a slab lapping one photograph) and case-study-summary: here a second, smaller photograph laps the first, and the result column ends on figures. ### The signature moment: a small photograph laps the corner of the large one and hangs below it, and the story ends on three figures A flex row of two items, the second lapping the first. The large 3:2 photograph and its caption take 75 percent; the smaller 4:5 photograph is fixed at 34 percent, pulled left over the large one by a negative margin and dropped by a top margin, so it overlaps the lower corner and hangs below it. Below, three columns for the brief, what was done and what it became; the last closes on 42, 3 and 64 set large with small words beneath. A client's line sits under a hairline at the foot. On a phone the two photographs keep their lap at a smaller size and the three columns stack in reading order. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits from your theme - The typeface. No font family is stated; the headline takes the theme's xx-large rung with a display clamp behind it, labels and captions are small tracked capitals in your body face. - Your colours. The slab is your contrast colour; every heading, paragraph, caption and figure states your base colour. Marks and the hairline are currentColor. - Your spacing. Vertical rhythm is spacing presets; the lap is in percentages so it holds at every width. Technical notesBlock mechanics, responsive behaviour and constraints ### The Folio look The free Folio set's case study: darkroom #141517 slab, bone #efe9df headline, figures and client line, silver #b9bcc2 copy and frame captions in monospace, safelight #c8432b marks on the labels. ### Photographs Two CC0 photographs from the WordPress.org Photo Directory, linked from pd.w.org: a hotel room with a daybed and a cove in low sun. Replace them with your own project's pictures. Questions ## Case study spread: common questions Does Case study spread need a plugin? No. It is built only from core WordPress blocks (column, columns, group, heading, image and paragraph), so it pastes into the block editor with nothing to install. Will Case study spread match my theme? Choose by variation. Dark spread takes your theme’s palette; Folio brings its own colours. How many variations does Case study spread have? 2: Dark spread and Folio. 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 Case study spread free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. 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. Read the markup #### 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)Blog Post featured lead Two Query Loops read as one section: the newest post opens at display size with its featured image, its byline and an excerpt, and the three behind it sit in a rail beside it as ruled date-and-title lines with no picture at all. It reads your own posts, so the lead changes the moment you publish; the preview on this page shows sample posts from our demo site, not yours. States no colour and no font of its own. (https://patternpaste.com/pattern/post-featured-lead.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. 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 Editorial Access Free 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, group, heading, image, paragraph Presets color 4, spacing 5, font-size 2 WordPress 7.0+ Continue exploring ## Next in Editorial Explore all 13 Editorial patterns (https://patternpaste.com/patterns/editorial/)Also in Gallery (https://patternpaste.com/patterns/gallery/) Shot in Twenty Twenty-Five Editorial No plugin needed ### Article opener The opening of a long read: a ruled strip of tiny metadata, a headline set as large as the section allows beneath it, a standfirst, and a first paragraph that opens with a drop cap at a strict reading measure. Editorial Preview pattern (https://patternpaste.com/pattern/article-opener.html) Shot in Twenty Twenty-Five Editorial No plugin needed ### Chapter rail A chapter of a guide: a narrow rail on the left carries the chapter numeral at display size and a short contents list, and stays put while the prose on the right scrolls past it. Editorial Preview pattern (https://patternpaste.com/pattern/chapter-rail.html) Shot in Twenty Twenty-Five Editorial No plugin needed ### Comments region The comment thread as a ruled record: a long rule under the count, then every comment opened by a currentColor hairline with the name tracked small against a plain date, the comment set at reading size, and the reply link tracked back down to the name's size. Editorial Preview pattern (https://patternpaste.com/pattern/comments-region.html)