Page Header

The page header serves as the first point of orientation, introducing the content and purpose of a page while helping users quickly understand that they are in the right place. Its design can vary depending on the page’s goal, ranging from high-impact marketing pages to simple utility pages and can be styled to reflect that purpose. Some headers may feature bold visuals and messaging to capture attention, while others may present a clean, straightforward page title for clarity. Regardless of the format, page headers are a crucial element in guiding the user experience and setting the tone for the content that follows.

When To Use This Component

Page headers appear once per page and are always positioned as the first component. They should be used when you want to clearly introduce the content and purpose of a page, helping users immediately understand where they are and what the page is about. By establishing context right at the top, page headers set the tone for the content that follows and guide the overall user experience.

USE CASES OR SCENARIOS

Orienting users: Helping visitors immediately understand where they are and what the page is about.
Setting the tone: Communicating whether the page is informative, promotional, or functional through its style and messaging.
Highlighting key content: Drawing attention to important pages, campaigns, or announcements.
Improving user experience: Guiding users through the site by establishing a clear visual and informational starting point.

Component Do’s & 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.

When creating a page header, ensure its purpose is clear by communicating what the page is about. Match the design to the page’s goal, using bold visuals for marketing or feature pages and simple titles for utility pages. Maintain consistency in placement and structure across similar pages, and prioritize readability with clear typography, good contrast, and sufficient spacing. Include supporting elements, such as subheadings, taglines, or visuals, to reinforce the page’s purpose, and balance text with images carefully. Use a succinct page title and short description, and choose photos with a right-side focal point to make the text easier to read and create a visually compelling composition. Additionally, always include descriptive alt text for header images to ensure accessibility for all users.

DON’T

Avoid placing too much text in your page header. This space is meant to introduce the page’s content, not to display everything at once. Choose images with a left-side focal point so the text remains readable and visually balanced. Too much text can make the header feel crowded, and in the worst case, it may obscure the main subject of your image.

Component Design Options

Below are the Page Header component design options, with explanations of each and guidance on proper usage.

EDITABLE PARTS:

Block Options: Layout
- 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.
- 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.
- Large: This design option is the most visually striking of the page header styles and should be used when you want your page to feel exciting, inviting, or highly engaging. It works best with high-quality imagery, so take the time to select a compelling image that complements your content. This header includes an eyebrow label, which can serve as a helpful navigation cue to indicate the section of the site, or as a stylistic element to add visual interest to your text block. It also features an optional button, ideal for highlighting a promotion, call-to-action, or key resource. You can customize the button’s color to match or complement your image, creating a cohesive and visually appealing header.
- Form Embed: The Form Embed Block allows site administrators to embed custom, university-approved forms directly into a webpage. These forms can include tailored fields and data-collection requirements specific to the needs of a department or initiative.
- Because embedded forms interact with university data systems and may collect sensitive or personally identifiable information (PII), all Form Embed Blocks must be reviewed and approved by the Web Services team before they are published.
Show Breadcrumbs: Option to turn off or on the breadcrumbs.
- Breadcrumbs are a navigation aid that shows users the path they’ve taken to reach a page, typically displayed as a series of links near the top of the page. They help users understand where they are within the site hierarchy and make it easier to navigate back to higher-level pages. Turning breadcrumbs on is recommended because they improve usability, reduce confusion, and enhance the overall user experience—especially on sites with multiple sections or deep page structures.

The example below shows the Page Header in use, along with the selected configuration options.

Page Header – Large

See Example

Eyebrow label (optional)
Page title
Description text (optional)
Image
Button (optional)
Hide/show breadcrumbs

Page Header – Medium

See Example

Page title
Description text (optional)
Image
Hide/show breadcrumbs

Page Header – Small

See Example

Headline:
Description text (optional):
Show Breadcrumbs (optional):