Header-Content Layout

The header-content layout allows you to design pages with visually-distinct header and content zones. For a more seamless look, the header extends to the top, left, and right edges of the page. The header consists of one or more card or billboard layouts into which other components and layouts may be placed.

When to Use a Header-Content Layout

Welcome Banners

Use a header-content layout to feature a welcome banner at the top of a landing page. This design draws viewers’ attention to text and images that identify the purpose of the page or site. Simpler designs with larger font sizes, bold pictures, and appropriate white space tend to work best. Matching the header background color to the site navigation bar background color also works well to create the impression of a larger, sleeker banner.

This employee health questionnaire site uses a bold welcome banner to clearly identify the purpose of the page

Title Bars

Use a header to display a prominent title bar that announces the topic of the page. The title bar can also highlight key attributes that provide summary information to viewers.

This new hire onboarding dashboard uses a header card to draw attention to the employee’s photograph, name, and key information

Secondary Navigation

A header can also be used to display secondary navigation controls that link to a sublevel of destinations within each site page.

A billboard layout is combined with a card layout containing secondary navigation controls in this header example

Transparent Content Background

The header-content layout can be configured to display with a transparent page background. When set, the light gray site background color will appear behind page content, instead of the default white page background. Use this option when your content is mostly or entirely arranged within card or box layouts (which provide their own white backgrounds). This setting allows cards and boxes to stand out clearly against a contrasting background.

The four category cards on this landing page stand out clearly against the transparent page background

Other Design Considerations

Page Width

While the header in a header-content layout is flush with the top, left, and right edges of the page, the width of the page itself also affects the appearance of the overall interface.

Site pages configured to use the “Full” width will fill the interface edge-to-edge and the header will be flush with the bottom of the site navigation bar. This is also the case with the “Wide” width on typical devices and monitors.

When the page fills the width of the interface, there are no gaps around the header

When using the “Medium” or “Narrow” site page widths, the page does not fill the whole interface and a visible margin remains around the page. This is also the case when viewing the page in Tempo and when the pages with the “Wide” setting are viewed on very wide monitors.

When the page is narrower than the full interface, a margin surrounds the page

Record Headers

If your interface is on a record view, you can achieve a similar look to the header-content layout by adding a record header. This will create a card or billboard background on the header that extends to the top, left, and right edges of the page. See the Define record views and actions page for more information.

Open in Github Built: Thu, Feb 23, 2023 (02:59:22 PM)

On This Page