Pattern Paste
Subscribe

Core Patterns Hero

FreeStandard

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

Loading patterns…

Theme
Preview size
Look

Takes your theme’s colours and type.

Twenty Twenty-Five·1280px

Manrope typefacergb(255, 255, 255) ground1280px viewport

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 <img> 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 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.

The markup

Core block markup and nothing else. Copy it, then paste it straight into the block editor: WordPress reads the delimiters and rebuilds the blocks. This is the file as authored; the copy button on the stage applies the finish you chose there.

4,855 bytes 
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:media-text {"align":"full","mediaType":"image","mediaWidth":45,"verticalAlignment":"center","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"}},"mediaUrl":"https://pd.w.org/2026/09/5456a96eac1a20c70.83624730-1152x1536.jpg","mediaAlt":"A coastal town with terracotta rooftops beside a calm blue sea."} -->
<div class="wp-block-media-text alignfull is-stacked-on-mobile is-vertically-aligned-center has-text-color has-background" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));grid-template-columns:45% auto"><figure class="wp-block-media-text__media"><img src="https://pd.w.org/2026/09/5456a96eac1a20c70.83624730-1152x1536.jpg" alt="A coastal town with terracotta rooftops beside a calm blue sea."/></figure><div class="wp-block-media-text__content"><!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"clamp(3.5rem, 7vw, 5.5rem)","bottom":"clamp(3.5rem, 7vw, 5.5rem)"}}},"layout":{"type":"constrained","contentSize":"30rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:clamp(3.5rem, 7vw, 5.5rem);padding-bottom:clamp(3.5rem, 7vw, 5.5rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"1.25rem"}},"typography":{"fontSize":"max(0.875rem, 14px)","fontWeight":"600","letterSpacing":"0.24em","lineHeight":"1.2","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:1.25rem;font-size:max(0.875rem, 14px);font-weight:600;letter-spacing:0.24em;line-height:1.2;text-transform:uppercase">Interiors and fit-out</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1,"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"1.5rem"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.25rem, 4.5vw, 4rem))"}}} -->
<h1 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:1.5rem;font-size:var(--wp--preset--font-size--xx-large, clamp(2.25rem, 4.5vw, 4rem))">The plan is quiet. The materials do the talking.</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"2rem"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.3vw, 1.1875rem))","fontWeight":"400","letterSpacing":"normal"}}} -->
<p style="margin-top:0;margin-bottom:2rem;font-size:var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.3vw, 1.1875rem));font-weight:400;letter-spacing:normal">We work in brick, lime plaster and oak, and we stay on site until the last shadow gap lines up. Twelve years, forty-one buildings, no showroom.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"0.75rem","margin":{"top":"0","bottom":"0"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
<div class="wp-block-buttons" style="margin-top:0;margin-bottom:0"><!-- wp:button {"style":{"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"2rem","right":"2rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem">See the work</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"border":{"width":"1px","color":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"1.75rem","right":"1.75rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-border-color wp-element-button" style="border-color:currentColor;border-width:1px;color:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1rem;padding-right:1.75rem;padding-bottom:1rem;padding-left:1.75rem">Start a project</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:group -->
Variation: Media right
4,902 bytes 
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:media-text {"align":"full","mediaPosition":"right","mediaType":"image","mediaWidth":45,"verticalAlignment":"center","style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"}},"mediaUrl":"https://pd.w.org/2026/09/5456a96eac1a20c70.83624730-1152x1536.jpg","mediaAlt":"A coastal town with terracotta rooftops beside a calm blue sea."} -->
<div class="wp-block-media-text alignfull has-media-on-the-right is-stacked-on-mobile is-vertically-aligned-center has-text-color has-background" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));grid-template-columns:auto 45%"><div class="wp-block-media-text__content"><!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"clamp(3.5rem, 7vw, 5.5rem)","bottom":"clamp(3.5rem, 7vw, 5.5rem)"}}},"layout":{"type":"constrained","contentSize":"30rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:clamp(3.5rem, 7vw, 5.5rem);padding-bottom:clamp(3.5rem, 7vw, 5.5rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"spacing":{"margin":{"top":"0","bottom":"1.25rem"}},"typography":{"fontSize":"max(0.875rem, 14px)","fontWeight":"600","letterSpacing":"0.24em","lineHeight":"1.2","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--role-label, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));margin-top:0;margin-bottom:1.25rem;font-size:max(0.875rem, 14px);font-weight:600;letter-spacing:0.24em;line-height:1.2;text-transform:uppercase">Interiors and fit-out</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1,"style":{"color":{"text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"margin":{"top":"0","bottom":"1.5rem"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.25rem, 4.5vw, 4rem))"}}} -->
<h1 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));margin-top:0;margin-bottom:1.5rem;font-size:var(--wp--preset--font-size--xx-large, clamp(2.25rem, 4.5vw, 4rem))">The plan is quiet. The materials do the talking.</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"spacing":{"margin":{"top":"0","bottom":"2rem"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.3vw, 1.1875rem))","fontWeight":"400","letterSpacing":"normal"}}} -->
<p style="margin-top:0;margin-bottom:2rem;font-size:var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.3vw, 1.1875rem));font-weight:400;letter-spacing:normal">We work in brick, lime plaster and oak, and we stay on site until the last shadow gap lines up. Twelve years, forty-one buildings, no showroom.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"0.75rem","margin":{"top":"0","bottom":"0"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
<div class="wp-block-buttons" style="margin-top:0;margin-bottom:0"><!-- wp:button {"style":{"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"2rem","right":"2rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link wp-element-button" style="padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem">See the work</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"color":{"background":"transparent","text":"var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)))"},"border":{"width":"1px","color":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"1.75rem","right":"1.75rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-border-color wp-element-button" style="border-color:currentColor;border-width:1px;color:var(--wp--preset--color--role-link, var(--wp--preset--color--contrast, var(--wp--preset--color--black)));background-color:transparent;padding-top:1rem;padding-right:1.75rem;padding-bottom:1rem;padding-left:1.75rem">Start a project</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div><figure class="wp-block-media-text__media"><img src="https://pd.w.org/2026/09/5456a96eac1a20c70.83624730-1152x1536.jpg" alt="A coastal town with terracotta rooftops beside a calm blue sea."/></figure></div>
<!-- /wp:media-text --></div>
<!-- /wp:group -->
Variation: Night
5,106 bytes 
<!-- wp:group {"align":"full","style":{"spacing":{"padding":{"top":"0","right":"0","bottom":"0","left":"0"}}},"layout":{"type":"default"}} -->
<div class="wp-block-group alignfull" style="padding-top:0;padding-right:0;padding-bottom:0;padding-left:0"><!-- wp:media-text {"align":"full","mediaType":"image","mediaWidth":45,"verticalAlignment":"center","style":{"color":{"background":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))","text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"}},"mediaUrl":"https://pd.w.org/2026/09/5456a96eac1a20c70.83624730-1152x1536.jpg","mediaAlt":"A coastal town with terracotta rooftops beside a calm blue sea."} -->
<div class="wp-block-media-text alignfull is-stacked-on-mobile is-vertically-aligned-center has-text-color has-background" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));background-color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));grid-template-columns:45% auto"><figure class="wp-block-media-text__media"><img src="https://pd.w.org/2026/09/5456a96eac1a20c70.83624730-1152x1536.jpg" alt="A coastal town with terracotta rooftops beside a calm blue sea."/></figure><div class="wp-block-media-text__content"><!-- wp:group {"style":{"spacing":{"blockGap":"0","padding":{"top":"clamp(3.5rem, 7vw, 5.5rem)","bottom":"clamp(3.5rem, 7vw, 5.5rem)"}}},"layout":{"type":"constrained","contentSize":"30rem","justifyContent":"left"}} -->
<div class="wp-block-group" style="padding-top:clamp(3.5rem, 7vw, 5.5rem);padding-bottom:clamp(3.5rem, 7vw, 5.5rem)"><!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"1.25rem"}},"typography":{"fontSize":"max(0.875rem, 14px)","fontWeight":"600","letterSpacing":"0.24em","lineHeight":"1.2","textTransform":"uppercase"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:1.25rem;font-size:max(0.875rem, 14px);font-weight:600;letter-spacing:0.24em;line-height:1.2;text-transform:uppercase">Interiors and fit-out</p>
<!-- /wp:paragraph -->

<!-- wp:heading {"level":1,"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"1.5rem"}},"typography":{"fontSize":"var(--wp--preset--font-size--xx-large, clamp(2.25rem, 4.5vw, 4rem))"}}} -->
<h1 class="wp-block-heading has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:1.5rem;font-size:var(--wp--preset--font-size--xx-large, clamp(2.25rem, 4.5vw, 4rem))">The plan is quiet. The materials do the talking.</h1>
<!-- /wp:heading -->

<!-- wp:paragraph {"style":{"color":{"text":"var(--wp--preset--color--base, var(--wp--preset--color--white))"},"spacing":{"margin":{"top":"0","bottom":"2rem"}},"typography":{"fontSize":"var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.3vw, 1.1875rem))","fontWeight":"400","letterSpacing":"normal"}}} -->
<p class="has-text-color" style="color:var(--wp--preset--color--base, var(--wp--preset--color--white));margin-top:0;margin-bottom:2rem;font-size:var(--wp--preset--font-size--medium, clamp(1.0625rem, 1.3vw, 1.1875rem));font-weight:400;letter-spacing:normal">We work in brick, lime plaster and oak, and we stay on site until the last shadow gap lines up. Twelve years, forty-one buildings, no showroom.</p>
<!-- /wp:paragraph -->

<!-- wp:buttons {"style":{"spacing":{"blockGap":"0.75rem","margin":{"top":"0","bottom":"0"}}},"layout":{"type":"flex","flexWrap":"wrap","justifyContent":"left"}} -->
<div class="wp-block-buttons" style="margin-top:0;margin-bottom:0"><!-- wp:button {"style":{"color":{"background":"var(--wp--preset--color--base, var(--wp--preset--color--white))","text":"var(--wp--preset--color--contrast, var(--wp--preset--color--black))"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"2rem","right":"2rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background wp-element-button" style="color:var(--wp--preset--color--contrast, var(--wp--preset--color--black));background-color:var(--wp--preset--color--base, var(--wp--preset--color--white));padding-top:1rem;padding-right:2rem;padding-bottom:1rem;padding-left:2rem">See the work</a></div>
<!-- /wp:button -->

<!-- wp:button {"style":{"color":{"background":"transparent","text":"currentColor"},"border":{"width":"1px","color":"currentColor"},"spacing":{"padding":{"top":"1rem","bottom":"1rem","left":"1.75rem","right":"1.75rem"}}}} -->
<div class="wp-block-button"><a class="wp-block-button__link has-text-color has-background has-border-color wp-element-button" style="border-color:currentColor;border-width:1px;color:currentColor;background-color:transparent;padding-top:1rem;padding-right:1.75rem;padding-bottom:1rem;padding-left:1.75rem">Start a project</a></div>
<!-- /wp:button --></div>
<!-- /wp:buttons --></div>
<!-- /wp:group --></div></div>
<!-- /wp:media-text --></div>
<!-- /wp:group -->
Back to Core Patterns

Continue exploring

Next in Hero

Explore all 32 Hero patterns

Hero measure rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero name and contact strip rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern
Hero next slots rendered in Twenty Twenty-FiveShot in Twenty Twenty-FiveHeroNo 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.

HeroPreview pattern