Start with the shape
Read the figure
The numbered parts explain the decisions behind the composition. Read the relationships first; the colors are simply there to make the structure visible.
Use one strong visual as the entry point into the page.
- 01Lead media
A relevant visual establishes the subject and its atmosphere.
- 02Readable message
The heading and action remain clear against or beside the media.
- 03Content continuation
The following section gives the visitor a clear place to continue.
How the pattern works
A featured-media layout gives a photograph, illustration, or video the greatest visual weight. The media introduces the subject or product, while a readable headline and a clear next step explain what the visitor can do.
The media should carry information, not simply occupy space. Plan the focal point, text contrast, loading behavior, and a useful static alternative before introducing motion or a large background video.
Where it fits—and what to consider
A useful choice when
- The subject is best introduced visually.
- A strong image or product demonstration is available.
- The visual supports a clear message and next action.
Be deliberate about
- Text over a busy image can become unreadable.
- Heavy media or continuous motion can delay or distract from the main task.
Adapt the relationship, not just the size
A useful mobile layout preserves the task and content order while changing how the regions share space.
On wider screens
Choose a focal point and an intentional media height. Keep the message readable and preserve access to the next section.
On narrower screens
Recheck the focal point and text contrast. Move copy below the image when an overlay would hide either the message or the subject.
Build the structure
- 01Choose media that explains the subject.
- 02Position the message where it remains readable.
- 03Provide responsive sizing, meaningful alternative text, and a static option for motion.
.media-hero { display: grid; }
.media-hero > * { grid-area: 1 / 1; }
.media-hero img {
width: 100%;
height: 100%;
object-fit: cover;
}
.media-hero__copy {
position: relative;
padding: clamp(1.5rem, 5vw, 4rem);
}Adapt the content, spacing, and breakpoints to your page. This example illustrates the structure, not a complete application.
A small design exercise
Try it yourself
Choose a photograph and place one headline over it. Test both a wide and narrow crop, then decide whether the mobile message should sit below the image.
See a worked example
Inspect a complete page using this pattern, then connect its content regions back to the annotated figure.
Open the example page
Put the pattern into practice
Use the layout prompt as a starting brief, then adapt it to your real content and the decisions covered in this guide.
Read the AI layout prompt
Select the text below and copy it into your AI tool. Replace example content with your own.