Page header cover strip

An interior-page opener with a small location label, h1 title and short introduction in a narrow full-height plate beside a broad uninterrupted photograph. On a phone the title strip reads first and the photograph follows.

The photograph takes most of the width, while every word stays in a narrow solid plate. The unequal split makes the photograph the dominant field without placing type on it. At phone width the two columns stack in their authored order, so the title still introduces the image.

Inherits: the base and contrast colours, the typeface, the type ladder and the spacing scale. Decides: the unequal split, the 44rem height, the low title position and the introduction's measure. The plate uses your base and its text uses your contrast; the text is checked at 4.5:1 against the plate.

The existing Page header patterns are typographic stacks, ruled records or a sheet crossing a colour boundary. cover-plate grows a plate from a photograph's lower corner. This pattern holds its plate as a separate, full-height column and leaves the adjacent photograph entirely uninterrupted.

• The h1 uses the theme's xx-large rung with a fluid fallback. It is ordinary page hierarchy rather than display type, and states only its size and colour.
• The introduction uses the medium rung with a fluid fallback and a 1.6 line height.
• The location is a label with its own 15px floor and a small amount of tracking. The hierarchy comes from its scale beside the h1.

• A full-width two-column row gives the title plate a fluid 20rem to 30rem basis and lets the photograph fill the remaining width, with no gap between them. That larger floor protects the title and body measure at tablet width.
• The photograph is an empty core/cover at a 44rem minimum height. Its zero veil leaves the image intact because no type sits over it.
• The title column stretches to the cover's height on a wide screen rather than setting its own content-box height. A fluid top margin holds the title and introduction low while the location remains high. Once stacked, the column returns to the height of its content.
• Core Columns stacks below its mobile breakpoint. The plate is authored first, so the page title remains first in reading order.

Replace the photograph, then change the location label, title and introduction. The title is built for two to five words and the introduction for one short sentence.

The copied markup includes a WordPress Photo Directory photograph of the Iloilo Convention Center. The public image URL keeps the example visible after pasting. Select the cover and choose Replace to use your own Media Library file. See image credits for the source and license. Pasting an image URL does not import a Media Library attachment.