Skip to main content
Web Creator Guide
Go to Search Page

Page Header

The page header introduces the content and purpose of a page, helping users know they’re in the right place. Depending on the page’s goal—whether it’s a high-impact marketing page or a simple utility page—the header can be styled to match. Some headers may include bold visuals and messaging, while others may simply display a clear page title. No matter the format, page headers play an essential role in guiding the user experience.

When To Use This Component

Page headers are used once per page. They will always be the first component on a page.

Component Dos & Don’ts

There is really only one time to use a Page Header component, and that is once per page, at the top of your page. Here are some things to keep in mind when using a Page Header component on your page.

DO

Take the time to compose your header to be well balanced between text and image. Use a succinct page title and a short description.

Choose photos that have a right-side focal point so your text is easier to read and your photo feels compelling and composes well.

DON’T

Try to avoid putting too much text in your page header. This area should be used to introduce the content of the page, not to show all of it.

Use images that have their focal point on the left. At best, it will crowd your text and feel cluttered. At worst, It will completely hide your main subject.

Component Design Options

Below you will find examples of the Page Header component and its various design options.

Page Header – Small

This design option is the most basic of the page header component set. It is used for utility pages that don’t need much pizazz, and are primarily for helping users find content or complete a task.

EDITABLE PARTS

See Example

Page Header – Medium

This design option is the happy medium of the page header component set. It can be used for a variety of pages that need a little more flair than just the text, but not as much as a full-width image.

EDITABLE PARTS

See Example

Page Header – Large

This design option is the punchiest of the page header component set. It should be used when you need your page to feel exciting, inviting or otherwise visually engaging. This option works best with high-quality imagery, so feel free to spend a little extra time looking for the perfect shot. It includes an eyebrow label, which works great for reminding users which section of the site they’re in, or as a stylistic piece of text to add a little bit more interest to your text block. It also includes an optional button. If you’re currently promoting something in particular, the button here is a great thing to take advantage of! You can also change it’s color to match or compliment the subject of your image.

See Example