Cover portholes: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/cover-portholes.html Core Patterns (https://patternpaste.com/patterns/) Cover (https://patternpaste.com/patterns/cover/) Catalogue access Standard # Cover portholes A tall full-bleed photograph with three large circular photographs of decreasing size centred on its lower edge, half on the picture and half on your theme's paper, each captioned below. Under them on the paper, a display heading beside a short lede and a text link. Includes four replaceable example photographs. ## All patterns Search patterns Loading patterns… The signature moment ## Portholes lap the frame Each circle is a core/cover with aspectRatio: 1 and a 50% radius, pulled up by exactly half its own width, so all three centres sit on the photograph's lower edge whatever their size: the largest reaches furthest into the picture and the smallest barely breaks it. Widths and laps are the same vw ratio, so the centres stay on the edge from 390 to 1920. Theme handoff ## What comes from where ### Theme and pattern Inherits every colour, the typeface and the spacing scale. Decides the three circle sizes (34rem, 23rem and 14.5rem at their widest), the photograph height (half the viewport width, 24rem to 60rem) and its focal point on the lamps, and a 1440px measure; below about 1000px the lede drops under the heading. 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 wide full-bleed core/cover on your photograph, giving way to a band of your theme's paper. Three circular photographs of decreasing size sit on the edge between them, each captioned on the paper below, and under them a display heading beside a lede and a text link. ### The signature moment: portholes lap the frame Each circle is a core/cover with aspectRatio: 1 and a 50% radius, pulled up by exactly half its own width, so all three centres sit on the photograph's lower edge whatever their size: the largest reaches furthest into the picture and the smallest barely breaks it. Widths and laps are the same vw ratio, so the centres stay on the edge from 390 to 1920. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits, what it decides Inherits every colour, the typeface and the spacing scale. Decides the three circle sizes (34rem, 23rem and 14.5rem at their widest), the photograph height (half the viewport width, 24rem to 60rem) and its focal point on the lamps, and a 1440px measure; below about 1000px the lede drops under the heading. Technical notesBlock mechanics, responsive behaviour and constraints ### Why the paper band is inside the cover A cover clips its overflow and its photograph is a positioned layer, so a sibling lapped up after it paints under the picture. The paper band is a group INSIDE the cover's inner container, and its top margin is what gives the photograph its height. The circles are flex items in a flex row, so their negative margins never collapse into the band. ### Type never sits on a photograph The large photograph and the circles 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) and the captions (14px to 16px, under 30 characters) sit on the paper in your contrast. ### What a buyer changes first The four photographs: select a cover and choose Replace. The circles crop to the middle of whatever you choose, so pick photographs with a centred subject. ### The Styled look variations/smoke-and-brass.html states its own colours and face: a smoke-grey paper (#d8d6d1) under near-black ink (#17171a), deep brass (#6b4e17) for the circle labels and a brass (#c9a24a) pill button with ink type. Avenir Next (Avenir, Futura) sets everything. ### 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 portholes: common questions Does Cover portholes 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 portholes match my theme? Choose by variation. Three portholes takes your theme’s palette; Smoke and brass brings its own colours. How many variations does Cover portholes have? 2: Three portholes and Smoke and brass. 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 portholes free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 11KB 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 5, spacing 4, font-size 1 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 plate A full-bleed cover on your own photograph with a paper plate grown out of its bottom-left corner carrying the eyebrow, headline and one line. Cover Preview pattern (https://patternpaste.com/pattern/cover-plate.html) Shot in Twenty Twenty-Five Cover No plugin needed ### Cover seam stamp Two full-height photographs side by side at full bleed with no gap: the left under a heavy veil of your theme's contrast colour carrying an eyebrow, display headline, lede and button, the right clean. Cover Preview pattern (https://patternpaste.com/pattern/cover-seam-stamp.html) 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)