Duo weight: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/duo-weight.html Core Patterns (https://patternpaste.com/patterns/) Gallery (https://patternpaste.com/patterns/gallery/) Catalogue access Standard # Duo weight Two photograph frames at deliberately unequal weight: a tall 3:4 portrait across 64% of the width and a small square at 36%, sitting on the same bottom line. The space left above the square is kept empty apart from one display numeral and a single line beneath it. Includes replaceable example images. ## All patterns Search patterns Loading patterns… The signature moment ## Two frames and the void between them The idea is the refusal to fill the space above the small frame. Two frames of different weight, hung from a shared bottom edge, produce an empty rectangle by arithmetic; most layouts then find something to put in it. This one puts a single numeral in it, at a scale nothing else in the section approaches (clamp(3.5rem, 7vw, 6rem), weight 700, tracking -0.045em, line-height 1), and one short line under that. Theme handoff ## What comes from where ### Theme and pattern Inherits: every colour (the band is a base chain, all four pieces of type a contrast chain, and there is no accent anywhere and no rule or border to carry one), the typeface, and the spacing scale (spacing|70 above and below the band, spacing|50 between the label and the row, spacing|40 between the frames once stacked, spacing|30 under the numeral, spacing|50 above the square). Decides: the 64/36 split, the 3:4 and 1:1 crops, the shared bottom edge, the 1240px measure with clamp(1.25rem, 4vw, 4rem) gutters, the clamp(1.25rem, 2.6vw, 2.5rem) gap between the frames, and the whole type ramp, which is three sizes and no more: a 14px tracked label, the display numeral, and a 15px to 18px line. The heading states its own text colour rather than inheriting the band's, because a theme's heading element style beats an inherited group colour. Both images use "scale":"cover" with a stated aspectRatio, so whatever the buyer uploads is cropped to the proportion the composition needs rather than changing it. 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 Two photograph frames in one row, at deliberately unequal weight. A tall 3:4 portrait takes 64% of the measure; a small 1:1 square takes 36% and sits on the same bottom line. Because the square is short and the portrait is tall, the square's column is left with a large empty area above it, and that area is the design. It carries one display numeral and one short line beneath it, and nothing else. A tracked label sits above the pair to place the section. ### The signature moment: two frames and the void between them The idea is the refusal to fill the space above the small frame. Two frames of different weight, hung from a shared bottom edge, produce an empty rectangle by arithmetic; most layouts then find something to put in it. This one puts a single numeral in it, at a scale nothing else in the section approaches (clamp(3.5rem, 7vw, 6rem), weight 700, tracking -0.045em, line-height 1), and one short line under that. The numeral is secondary to the frame relationship. It occupies the void; it is not the idea. Swap it for a year, a room number or a roman numeral and the section is unchanged, because what a visitor reads is the proportion between a tall frame and a small one and the quiet that sits over the small one. It survives colourlessness because it is made of proportion, alignment and emptiness: 64/36, a shared bottom edge, and a scale collision between a 56px to 96px numeral and a 15px to 18px line. Nothing here is carried by a hue, so it looks the same argument in a theme whose base is cream and one whose base is white, and it reads the same in a serif face and a sans one. The bottom alignment is set on each core/column (verticalAlignment: "bottom", rendered as is-vertically-aligned-bottom), not only on the core/columns block: the columns-level class is overridden by core's own align-items: normal !important on the front end and does nothing there. Set on the parent alone, the two frames would top-align, the void would open under the square instead of over it, and the section would read as a frame with a hole beneath it. Make it yoursVariations and the edits to make first ### Variations - Mirrored duo (duo-mirror): the spread flips. The square and its numeral move to the left column, the tall portrait takes the right, and the type in the void and the label above align right so the mirror is complete. Same two frames, same 64/36 proportion, same colours; only the composition changes, which is the one axis a variation is allowed to move. On a phone it stacks to numeral, line, square, portrait, so the mirror also reverses the order of the two frames. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits, what it decides Inherits: every colour (the band is a base chain, all four pieces of type a contrast chain, and there is no accent anywhere and no rule or border to carry one), the typeface, and the spacing scale (spacing|70 above and below the band, spacing|50 between the label and the row, spacing|40 between the frames once stacked, spacing|30 under the numeral, spacing|50 above the square). Decides: the 64/36 split, the 3:4 and 1:1 crops, the shared bottom edge, the 1240px measure with clamp(1.25rem, 4vw, 4rem) gutters, the clamp(1.25rem, 2.6vw, 2.5rem) gap between the frames, and the whole type ramp, which is three sizes and no more: a 14px tracked label, the display numeral, and a 15px to 18px line. The heading states its own text colour rather than inheriting the band's, because a theme's heading element style beats an inherited group colour. Both images use "scale":"cover" with a stated aspectRatio, so whatever the buyer uploads is cropped to the proportion the composition needs rather than changing it. ### Display type Off the theme's ladder on purpose, because the size is the composition: - paragraph at clamp(3.5rem, 7vw, 6rem) Technical notesBlock mechanics, responsive behaviour and constraints ### What happens at 390px Core stacks core/columns below 782px, so the columns become two full-width rows, the bottom alignment has nothing left to act on, and the void closes. The section becomes portrait, then numeral and line, then square, in that order. That is an honest change rather than a preserved one: the empty rectangle is a consequence of two columns side by side and cannot exist in one column. What survives is the descent in scale, a tall frame, a large numeral with a small line under it, and a square half its height, which still reads as deliberate sequencing rather than three stacked blocks. Nothing shifts, overlaps or offsets on the way down, because the composition is built from column widths and alignment and not from a negative margin. ### What a buyer changes first The two photographs. Both image blocks include example photographs; choose Replace to select an image from your media library. The pair wants two distinct subjects rather than two crops of one, since the whole section is a comparison of weights. Then the numeral. Two characters is the size it was drawn for; three still work, four will wrap at 390px. Then the line under it, which should stay short enough to run to two lines at most in the 36% column, and the label above the pair, which is set in caps with wide tracking and reads best under about 25 characters. If the void feels too large for a particular pair of photographs, the honest lever is the square's aspect ratio, not a margin: the empty area is exactly the difference between the two frames' heights. ### 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 ## Duo weight: common questions Does Duo weight 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 Duo weight match my theme? Yes. It names no colour or font of its own: every colour, size and space is a preset from your theme, so it takes your theme’s palette and type when pasted. How many variations does Duo weight have? 2: Portrait left and Mirrored duo. 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 Duo weight free? It is included with a subscription, with every Core Pattern and variation. 62 Core Patterns are free to copy without one. 4.0KB of core-block markup, 6 blocks (column, columns, group, heading, image, 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)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 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 Gallery Access Subscription Plugin None, core blocks only Variations 2 Colour From your theme Type From your theme Motion None Blocks column, columns, group, heading, image, paragraph Presets color 5, spacing 4, font-size 1 WordPress 7.0+ Continue exploring ## Next in Gallery Explore all 30 Gallery patterns (https://patternpaste.com/patterns/gallery/) Shot in Twenty Twenty-Five Gallery No plugin needed ### Drift columns Six portrait frames in three columns of two, each column started lower than the one before it, so the frames read as a descending diagonal. Gallery Preview pattern (https://patternpaste.com/pattern/drift-columns.html) Shot in Twenty Twenty-Five Gallery No plugin needed ### Frame quartet Four square photographs in a two-by-two grid, each one inset inside its own ruled plate with a generous mat of white space around it and a small tracked caption underneath, so the four read as framed prints rather than tiles. Gallery Preview pattern (https://patternpaste.com/pattern/frame-quartet.html) Shot in Twenty Twenty-Five Gallery No plugin needed ### Six framed prints Six square photographs in two rows of three, each one inset inside its own ruled plate with a mat of the band's own ground around it and a small tracked numeral and caption below, so the wall reads as six framed prints rather than six tiles. Gallery Preview pattern (https://patternpaste.com/pattern/frame-sextet.html)