Page Header

The Page Header defines the primary context of a full-page view and provides access to important actions related to that view. It gives users immediate clarity about what they’re looking at and what they can do next, with a consistent layout that adapts to different content types.

This component is displayed at the top of a page and is designed to be responsive, accessible, and adaptable to different screen sizes and content needs.

Purpose

• Clearly communicates the content and purpose of the current page.

• Anchors user orientation and supports recognition over recall.

• Hosts actions and metadata relevant to the entire page.

Structure

1. User context - Shown when the page is accessed in the context of another user or group. Helps admins or managers act on behalf of others.

2. Breadcrumbs - Shows the user’s position within the platform structure. Supports upward navigation via the parent-child hierarchy. (Note: this is not a historical trail.)

3. Back navigation - Allows users to return to the previous screen with their original filters, scroll position, and state preserved.

4. Title - Clearly communicates the main topic or purpose of the page.

5. Subtitle - Offers supplementary information or context to support the page title.

6. Description - Provides a brief and informative overview of the page's content or purpose.

7. Properties list - Displays a list of relevant properties or attributes associated with the page context

8. Linear progress - Indicates the progress of a linear process or task.

9. Tabs - Enables navigation across page sections.

10. Primary action - the main page-level action or the most important action a user can take.

11. Secondary action - Offers additional, often complementary, page-level actions for users.

12. Toolbar - A container for various tools and options, enhancing user interaction and functionality.

13. Image - Used to add visual context (e.g., course thumbnails)

14. Circular progress - Indicates the progress of a circular or ongoing task. The ❽ Linear progress is preferable compared to circular progress.

Layout variations

Several layout styles are available, and the system chooses the most suitable layout based on the type and purpose of the page.

While you may not be able to choose the layout style directly, rest assured that each variant has been selected to match the context and content of the page.

Default (❶): This style places a central focus on the page title and global actions, providing users with a clear overview of the content and immediate access to key functionalities.

Promo (❷): Aims to highlight the contextual image, creating a visually compelling introduction to the page's subject matter.

Admin (❸): Maintain focus on the page title while still displaying the contextual image. This strikes a balance between information and visual elements.

Flyover (❹): Sticky header activated on scroll to retain context.

These layout decisions are made by our design team based on extensive UX research and usability testing. This ensures that users always get the best visual balance and contextual clarity, without requiring manual configuration.

Responsive & accessible by design

• On mobile devices, all header content stacks vertically

• Tabs become scrollable horizontally for compact navigation

• All header elements are keyboard accessible and screen reader friendly

Tips for a better experience

To ensure the Page Header looks clean and supports the user experience:

• Keep titles short, clear, and specific (under 80 characters)

• Use subtitles and descriptions only when they add value

• Add images that help with orientation or recognition and do not contain any text

---

The Page Header supports a wide variety of use cases across the platform, providing consistency and clarity regardless of the page's purpose. It’s a flexible and consistent component that helps users feel in control, no matter where they are in the platform.