Cover filmstrip: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/cover-filmstrip.html Core Patterns (https://patternpaste.com/patterns/) Cover (https://patternpaste.com/patterns/cover/) Catalogue access Standard # Cover filmstrip A full-bleed band in your theme's contrast colour with a display heading, a short lede and a button, over a single row of five tall photographs that runs into both edges of the page: the middle three are whole frames numbered 02 to 04 on small plates, and the first and last are narrower crops flush to the page edges, so the strip reads as cut by the page. On a phone the middle frame takes half the width and its neighbours run off the edges. Includes replaceable example photographs. ## All patterns Search patterns Loading patterns… The signature moment ## The strip runs off both edges of the page The middle three frames are whole 3/4 covers with a numbered plate, 02 to Theme handoff ## What comes from where ### Theme and pattern Inherits: every colour, the typeface, the spacing scale. Decides: the frame widths at each size, the 3/4 frames, the 0.625rem gutter, the 1680px measure of the heading row and the display ramp. 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 full-bleed band in your contrast with a display heading, a short lede and a button, over a single row of five tall photographs that runs into both edges of the page, so the first and last frames read as cut off by the page. ### The signature moment: the strip runs off both edges of the page The middle three frames are whole 3/4 covers with a numbered plate, 02 to - The first and last are narrower covers set flush to the page edges, each showing the inner side of its photograph (focal point at the far edge), so they read as frames 01 and 05 cut by the page, their plates off screen. Nothing actually leaves the viewport: a frame pushed past the page edge is unreachable on a phone and the page would scroll sideways, so the bleed is made by the crop instead. The row is a flex row whose frame widths switch at 782px with a clamp() ramp: on a wide screen the edges take 11% each and the three whole frames 26%; on a phone the middle frame takes half the width, its neighbours run to the page edges and a sliver of the first and last frames shows beyond them. The band is a cover holding the first photograph under a full veil of your contrast, so it paints a plain ground and clips nothing it should not. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits, what it decides Inherits: every colour, the typeface, the spacing scale. Decides: the frame widths at each size, the 3/4 frames, the 0.625rem gutter, the 1680px measure of the heading row and the display ramp. Technical notesBlock mechanics, responsive behaviour and constraints ### Type and the photographs The heading is display type, a bare clamp() from 44px to 96px, because its size is the composition. Eyebrow, lede and button sit on the band, your base on your contrast. The frames carry no veil and no type: each number sits on a small plate of your base under your contrast, in small. ### What a buyer changes first The five photographs, keeping the strongest one in the middle frame, which is the largest at every width. In the two edge frames keep the focal point at the inner edge so the cut still reads. ### 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. Questions ## Cover filmstrip: common questions Does Cover filmstrip need a plugin? No. It is built only from core WordPress blocks (button, buttons, cover, group, heading and paragraph), so it pastes into the block editor with nothing to install. Will Cover filmstrip match my theme? Choose by variation. Ink band, five frames takes your theme’s palette; Roast and oat brings its own colours. How many variations does Cover filmstrip have? 2: Ink band, five frames and Roast and oat. 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 filmstrip free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 16KB of core-block markup, 6 blocks (button, buttons, 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 button, buttons, cover, group, heading, paragraph Presets color 6, spacing 4, font-size 2 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 contents A full-bleed photograph under a heavy veil of your contrast colour, set like a magazine contents page: a large eyebrow, a display title and a short lede, then a ruled list of four rows, each a small clear photograph, a number, a large title and a text link. Cover Preview pattern (https://patternpaste.com/pattern/cover-contents.html) Shot in Twenty Twenty-Five Cover No plugin needed ### Cover interval A short full-bleed band of looping video set between two text sections, almost empty on purpose: a 20% veil of your contrast colour over the clip and one small ink plate on the bottom-right edge carrying a tracked label and one line. Cover Preview pattern (https://patternpaste.com/pattern/cover-interval.html) Shot in Twenty Twenty-Five Cover No plugin needed ### Cover lap A page opener where a full-bleed photograph gives way to a band of your theme's paper, and an ink plate carrying the eyebrow, headline, lede and button straddles the edge between them: half on the picture, half on the page. Cover Preview pattern (https://patternpaste.com/pattern/cover-lap.html)