Page Header
layout:page-header
Use the page-header layout as the first module on a landing page. It creates the page's main h1 and optionally displays a circular image.
#Data mapping
| Visible element | NationBuilder field |
|---|---|
| Main page heading | Basic page headline |
| Introductory text and buttons | Basic page content |
| Header image | First image attachment |
| Image alternative text | Page excerpt, falling back to headline |
Behaviour
With an image, desktop uses a two-column layout with text on the left and a circular image on the right. On mobile, the image appears first and the text is centred beneath it.
Without an image, the text is centred in a single column on all screen sizes.
Use only one layout:page-header on a landing page. Because it generates an h1, later module headings should follow it as h2 headings.