Skip to main content

Page header block

What is the Page header block for?

Do not rebuild a manual hero from the article's own data. Page header turns the current content title, lead and metadata into a consistent opening block. For news it can show the publication date; for events, the date or date range and venue; for categorised content, the category can appear too.

The image can use the content item's card image by default, or you can give the header its own image and focal point.

Website Blocks

Page header block

Use a consistent opening block for news and events, pulling the title, lead, date, venue and image directly from the content item.

Website Blocks

Page header block

Use a consistent opening block for news and events, pulling the title, lead, date, venue and image directly from the content item.

A craftswoman carving a pattern into a wooden bowl with a chisel in a workshop.

Website Blocks

Page header block

Use a consistent opening block for news and events, pulling the title, lead, date, venue and image directly from the content item.

A potter's hands shaping clay while working.
A craftswoman carving a pattern into a wooden bowl with a chisel in a workshop.

Website Blocks

Page header block

Use a consistent opening block for news and events, pulling the title, lead, date, venue and image directly from the content item.

The header reflects the content item's own data. If the title, lead, date, venue or category is wrong, correct it on the news item, article or event itself. The image is the deliberate exception: you can use the card image or choose a separate image for the header.

Twelve layouts for different levels of visual emphasis

Besides the four classic layouts, the Header layout picker now offers eight designed layouts. A new block still starts as Centred, and existing headers do not change.

Classic layouts

  • Centred: a classic, text-led opening.
  • Image left: useful when the image should introduce the content first.
  • Image right: gives the text the first reading position.
  • Over the image: use when the visual is an important part of the story. Without an image, it falls back safely to Centred.

Designed layouts

  • Editorial: no image; a very large title and a byline under a hairline. Settings: Title size (Large / Huge), and the Byline can be switched off.
  • Colour band: no image; the words on a coloured band, for pages without a photo. Setting: Text alignment (Left / Centred). Band colour and Band text are in the Colours group.
  • Poster: the image blurred behind everything and sharp again as a framed poster. Settings: Image side (Right / Left / Centred), Poster shape (Portrait / Square / Landscape), Background blur (Soft / Strong).
  • Panorama: title and lead side by side, a low, wide strip of the image below. Setting: Strip height (Low / Medium).
  • Newspaper: no image; a masthead rule and the date set large in its own column. Setting: Date column (Left / Right).
  • Duotone: the image in two colours, the title over it; one look for mixed photos. Light tone and Dark tone are in the Colours group.
  • Arch: the image under an arched or round mask, beside an italic title. Settings: Image side (Right / Left), Mask (Arch / Circle).
  • Offset block: the image on a block of colour stepping out from behind it. Settings: Image side (Right / Left), Offset (Down right / Down left). Block colour is in the Colours group.

A layout's own settings appear under the layout picker and stay on the block when you switch layouts. For the colours you can choose the accent, dark or a custom colour. Colour band and Duotone paint the whole block, so they have no separate background colour. Poster and Duotone fall back to Centred when there is no image. There is a live example of each new layout below.

Live example: Editorial. No image, Title size: Huge, with the byline on.

Website Blocks

Page header block

Use a consistent opening block for news and events, pulling the title, lead, date, venue and image directly from the content item.

Live example: Colour band. No image, Text alignment: Left, the band in the accent colour.

Website Blocks

Page header block

Use a consistent opening block for news and events, pulling the title, lead, date, venue and image directly from the content item.

Live example: Poster. Image side: Right, Poster shape: Portrait, Background blur: Strong.

Website Blocks

Page header block

Use a consistent opening block for news and events, pulling the title, lead, date, venue and image directly from the content item.

A potter's hands shaping clay while working.

Live example: Panorama. Strip height: Low.

Website Blocks

Page header block

Use a consistent opening block for news and events, pulling the title, lead, date, venue and image directly from the content item.

A potter's hands shaping clay while working.

Live example: Newspaper. No image, Date column: Left.

Website Blocks

Page header block

Use a consistent opening block for news and events, pulling the title, lead, date, venue and image directly from the content item.

Live example: Duotone. With the default colours: the light tone is the accent, the dark tone the site's dark colour.

A craftswoman carving a pattern into a wooden bowl with a chisel in a workshop.

Website Blocks

Page header block

Use a consistent opening block for news and events, pulling the title, lead, date, venue and image directly from the content item.

Live example: Arch. Image side: Left, Mask: Arch.

Website Blocks

Page header block

Use a consistent opening block for news and events, pulling the title, lead, date, venue and image directly from the content item.

A potter's hands shaping clay while working.

Live example: Offset block. Image side: Right, Offset: Down right, the block in the accent colour.

Website Blocks

Page header block

Use a consistent opening block for news and events, pulling the title, lead, date, venue and image directly from the content item.

A craftswoman carving a pattern into a wooden bowl with a chisel in a workshop.

What can you configure in the Page header?

You do not duplicate the content. You choose which of its own data appears and how it is arranged.

Content source

Title, lead, date, venue and category come from the current news item or event, so you do not maintain them twice.

H1 or H2

Choose the heading level so the block fits the page's heading hierarchy.

Lead and metadata

Toggle lead, date, venue and category independently. Only data available for the current content type is shown.

Image

Show or hide the image, and use either the content item's card image or a separately selected image. The layouts drawn without an image (Editorial, Colour band, Newspaper) do not offer it.

Focal point and overlay

Adjust the image focal point. In the Over the image layout, choose a light, medium or dark overlay to keep text readable.

Background and width →

Use the background, section width and content width controls to fit the header into the page's visual rhythm.

When is another block better?

Page header presents existing content data; a hero creates a standalone marketing message.

Hero · centred →

Use it when you need your own headline, offer and CTA.

Breadcrumb →

Use it when you want to show where the visitor is in the content hierarchy.

Title →

Use it when you only need to mark the beginning of a new section.

CONSISTENT CONTENT OPENING

Build a clear, repeatable header from the news or event's own data.

Title, lead, category, date, venue and image give readers the context they need before they start.

Build my website →Back to Website Blocks