Define a page header pattern

Problem

Most of the page headers in GitLab contain at least 2 or all of the following elements:

• A breadcrumb
• A title
• Metadata
• One or several CTAs

But the way we structure our page headers is inconsistent across the app:

In other instances, metadata accounts for half of the page view pushing the page content almost out of view:

Pipeline overview page	Commit page

Solution

Define and create a page header region. Using the MR header layout as an example, we could define a reusable pattern that ensures visual and functional consistency across the app. All the page headers using the above structural elements should look the same:

W.I.P

• Extended audit - View in Figma
• Isolate patterns - View in Figma
• Explore updated layouts
• 👉 Draft guidelines
• Validate new headers?