Hero media and text: WordPress Block Pattern, Pattern Paste Canonical: https://patternpaste.com/pattern/hero-media-text.html Core Patterns (https://patternpaste.com/patterns/) Hero (https://patternpaste.com/patterns/hero/) Free Standard # Hero media and text A hero built on Media & Text rather than columns, so the photograph runs off the side of the screen while the words stay on the page's own measure. The picture takes 45% of the full viewport width and bleeds to the left edge; the eyebrow, the headline, the lede and the two buttons sit in a 30rem measure beside it. The media frame includes a replaceable example photograph. ## All patterns Search patterns Loading patterns… The signature moment ## The picture and the words obey different grids The photograph is measured against the viewport and the type is measured against the page. The media column is 45% of the full screen width and bleeds to the left edge and to the top and bottom of the section, while the eyebrow, the h1, the lede and the buttons sit in a 30rem measure that does not move when the screen gets wider. So the two halves of the section are not two columns of a grid; they are two different systems butted together, and the seam between them is the whole design. That is what core/media-text gives you and core/columns cannot: a column whose width is a percentage of the window rather than of a container, with the block's own grid holding the two sides level. Theme handoff ## What comes from where ### Theme and pattern Inherits: every colour (the band's ground is a base chain, its type and its primary button's ground a contrast chain, and the outline button's rule is currentColor), the typeface, and the theme's own button hover and focus states. Decides: the 45/55 split, the 30rem measure, the vertical air (clamp(3.5rem, 7vw, 5.5rem) top and bottom on the text side only, so the picture bleeds past it), and the type proportion: a 14px eyebrow at 0.24em tracking, an h1 at clamp(2.25rem, 4.5vw, 4rem) with -0.03em tracking at 1.03, and a lede at 17px to 19px at 1.6. The section has no vertical padding of its own. All of the air is on the text side, which is what lets the photograph run to the top and bottom edges of the band as well as to the side. If you want a margin above the picture, move the padding from the inner group to the core/media-text block itself, and accept that it insets the picture on every side. 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-width opening section built on core/media-text, which nothing else in this catalogue uses. The photograph takes 45% of the viewport and runs off the left edge of the screen; the words take the rest and are held to a 30rem measure inside it. Above the headline is a 14px tracked caps eyebrow, below it a lede and two buttons. The media frame includes an example photograph; choose Replace to select your own file. ### The signature moment: the picture and the words obey different grids The photograph is measured against the viewport and the type is measured against the page. The media column is 45% of the full screen width and bleeds to the left edge and to the top and bottom of the section, while the eyebrow, the h1, the lede and the buttons sit in a 30rem measure that does not move when the screen gets wider. So the two halves of the section are not two columns of a grid; they are two different systems butted together, and the seam between them is the whole design. That is what core/media-text gives you and core/columns cannot: a column whose width is a percentage of the window rather than of a container, with the block's own grid holding the two sides level. Everything else is held quiet so the seam is what you see. There is no rule, no tint, no border on the picture, and the only weight in the type is the one-step jump from a 14px eyebrow to a headline that clamps between 36px and 64px. It survives colourlessness because it is entirely proportion: 45% against 55%, a viewport measure against a 30rem measure. Take the palette away and the picture still escapes the layout the words obey. Make it yoursVariations and the edits to make first ### Variations - Media right: mediaPosition: "right", so the figure is serialised after the content and the grid becomes auto 45%. The picture escapes the right edge and the words keep the left of the page. The composition is the only thing that moves: same measure, same chains, same type scale. On a phone it is identical to the base, because core stacks media first either way. - Night: the colour axis by inversion, which is the one colour move that arrives in every theme, since base and contrast are the only universal slugs. The band's ground becomes a contrast chain and every piece of type a base chain; the primary button flips to a base ground with contrast text and the outline button keeps its currentColor rule, which now follows the light type. One axis, nothing else touched. Theme behaviourInheritance, fixed decisions and contrast ### What it inherits, what it decides Inherits: every colour (the band's ground is a base chain, its type and its primary button's ground a contrast chain, and the outline button's rule is currentColor), the typeface, and the theme's own button hover and focus states. Decides: the 45/55 split, the 30rem measure, the vertical air (clamp(3.5rem, 7vw, 5.5rem) top and bottom on the text side only, so the picture bleeds past it), and the type proportion: a 14px eyebrow at 0.24em tracking, an h1 at clamp(2.25rem, 4.5vw, 4rem) with -0.03em tracking at 1.03, and a lede at 17px to 19px at 1.6. The section has no vertical padding of its own. All of the air is on the text side, which is what lets the photograph run to the top and bottom edges of the band as well as to the side. If you want a margin above the picture, move the padding from the inner group to the core/media-text block itself, and accept that it insets the picture on every side. Technical notesBlock mechanics, responsive behaviour and constraints ### How the width is actually written mediaWidth is only serialised when it differs from 50: at 45 the block emits grid-template-columns: 45% auto inline (auto 45% when the media is on the right). At 50 it emits nothing and core's stylesheet supplies the default, so a "50/50" variation of this pattern would carry no inline width at all. That is why the number in the block's settings and the number in the style attribute have to agree: they are two copies of one decision, and only one of them is what the browser reads. align: "full" is stated in the block's settings and in the markup. The attribute has a default of "none" in block.json, so "align":"full" is non-default and survives serialisation; the class alignfull is what actually makes the picture reach the edge of the screen. ### What happens at 390px isStackedOnMobile is core's default and is left on, so below 782px the block becomes one column, the inline grid-template-columns is overridden by core's !important mobile rule, and the picture goes full width with the words beneath it. The media is always first on a phone, in both the base and the mirrored variation, because core puts the figure in grid row 1 and the content in row 2 regardless of mediaPosition. That is right for a hero: the phone gets the picture, then the headline. The content side keeps core's own padding: 0 8% and adds nothing horizontal of its own, so at 390 the words sit in a 328px measure with a 31px gutter on each side, and the 30rem constraint stops applying because it is wider than the column. ### What a buyer changes first The photograph. The media frame includes an example photograph, with mediaType: image and its public mediaUrl saved in the block. Choose Replace to change the image while retaining the composition. The one thing worth knowing before choosing: core/media-text does not crop. The is width: 100%; height: auto, so the photograph's own proportion decides the height of the section when it is taller than the words. A portrait picture makes a tall, quiet hero with the type centred against it; a wide one makes a short band with the ground showing above and below the picture. Pick the crop before you upload, or set mediaWidth lower so a wide photograph is not so tall. After that: the headline reads best at two lines, which is about 50 characters at the 30rem measure, and the lede at about 140. The eyebrow is a label, not a sentence. ### 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 ## Hero media and text: common questions Does Hero media and text need a plugin? No. It is built only from core WordPress blocks (button, buttons, group, heading, media-text and paragraph), so it pastes into the block editor with nothing to install. Will Hero media and text match my theme? Choose by variation. Media left, Media right and Night take your theme’s palette; Spur brings its own colours. How many variations does Hero media and text have? 4: Media left, Media right, Night and Spur. 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 Hero media and text free? Yes. It is one of 62 free Core Patterns: copy it and it is yours to keep and edit. Its Styled looks come with a subscription. 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. Its Styled looks come with a subscription. Read the markup 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 Features Appointment letter checklist What to bring to a first appointment, set as the confirmation letter itself: a card with the booking's details written into ruled blanks (date, time, who, where, length and fee) and a checklist of empty squares to tick the night before, beside a short introduction. States no colour and no font of its own. (https://patternpaste.com/pattern/appointment-letter-checklist.html)Stats Arisings recycled figures A figures section on an inverted slab where one number carries it: a percentage set at display size over a heading that finishes the sentence and a short note, beside a tall photograph. Under it three ruled tiles break the figure down, each a large percentage, a heading and a line, with a second photograph as the fourth tile. Four across on a wide screen, two on a tablet, one on a phone. States no colour and no font of its own. (https://patternpaste.com/pattern/arisings-recycled-figures.html)Compare Compact comparison rows A mobile-first responsive comparison layout using stacked capability cards: each row pairs a feature title and summary with a side-by-side comparison block, avoiding horizontal table scrolling on small screens. States no colour and no font of its own. (https://patternpaste.com/pattern/compare-compact-rows.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 Hero Access Free Plugin None, core blocks only Variations 4 Colour From your theme or its own palette Type From your theme or its own type Motion None Blocks button, buttons, group, heading, media-text, paragraph Presets color 6, font-size 2 WordPress 7.0+ Continue exploring ## Next in Hero Explore all 32 Hero patterns (https://patternpaste.com/patterns/hero/) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero measure A hero held in the left half of a wide band: a tracked eyebrow, a headline running to a 44rem measure, a lede locked to 28rem under it, and one text action ruled with a currentColor underline. Hero Preview pattern (https://patternpaste.com/pattern/hero-measure.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero name and contact strip A portfolio home hero where the person's name is the headline, set at the width of the page, then a hairline with one line of discipline and place, a short sentence, a filled and a text-link action and an availability note, then a strip of five photographs of equal height, each with a frame number and place beneath like a contact sheet. Hero Preview pattern (https://patternpaste.com/pattern/hero-name-contact-strip.html) Shot in Twenty Twenty-Five Hero No plugin needed ### Hero next slots A clinic or practice hero: a display headline, a short lead and two text links beside a square photograph, with a card of the next free appointments lapping the photograph's foot. Hero Preview pattern (https://patternpaste.com/pattern/hero-next-slots.html)