# 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. States no colour and no font of its own. Canonical: https://patternpaste.com/pattern/hero-media-text.html Section: Hero Access: Free, and free to keep. Needs: 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. Blocks: button, buttons, group, heading, media-text, paragraph Keywords: hero, media and text, split, photograph, headline, buttons, full width ## Variations (4) ### Media left (the default) Identical markup in every theme. The photograph on the left, bleeding to the edge of the screen and to the top and bottom of the section; the type on the right, held to a 30rem measure so the lines stay readable however wide the screen gets. On a phone the picture goes full width and the words follow beneath it. ### Media right Identical markup in every theme. The same section mirrored: the photograph escapes the right edge instead, and the words keep the left of the page. Nothing but the composition moves. On a phone the picture still comes first, because Media & Text stacks media above text whichever side it was on. ### Night Identical markup in every theme. The one colour move that arrives in every theme: the band inverts to your theme's contrast colour with base type, so the photograph sits on ink instead of paper and the primary button flips with it. Same composition, same measure, same type scale. ### Spur This variation states its own colours and states its own type: identical in every theme. The Spur electrician and plumber set: a chrome basin tap off the left edge beside a switch-white column, the promise in Arial Black cable black over slate Arial, a square live-blue Get a fixed price button and the emergency number in a 2px cable-black outline. --- ## 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. ## 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 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. ## 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. ## 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. ## 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](/image-credits/) for the sources and licenses. Pasting an image URL does not import a Media Library attachment.