[Discuss] Super Page Header (stacked page layout)

[ryankeairns]

I'm not sure whether this is the next evolution of, or an alternative to, the existing EuiPageHeader component, but to gain consistency across page headers (and home pages) in Kibana, we need something that can provide the following.

👉 Notes

• The remainder of this issue is predominantly focused on the header, however the desired 'stacked' layout is really a full page consideration.
• Specifically, we're looking at the shaded header area; saving that additional parent header (with condensed tabs) for a separate/future effort.

Requirements

Base

• Shaded, full width background
• Centered, width-restricted layout
• Back link (optional)
• Page title (required) - with optional badge
• Description text / Sub title (optional)
• Meta data area (optional) - stats, links, buttons, etc.

Nice-to-haves?

• Support for tabs (optional; at bottom)
• Hero image (optional; presumably can't be combined with Menu area)
• 'Profile' image (optional; see Nginx logo below; not sure if this is part of base reqs but it already exists)

Mockups

App home page

Ingest Manager package listing

Minimal content

Layout considerations

As can be seen in the prior mockup, we've moved to a stacked approach where the header has a shaded background color. This design has already been implemented in several places - Kibana home, Kibana overview, and Ingest Manager, to name a few.

This is a departure from a common page layout exemplified by the Kibana app home pages.

Current app home pages

Additional considerations

• A 'parent' header with condensed tabs (left) + menu area (right)
• A container for the content below the header with the default EuiPageBackgroundColor

[ryankeairns]

cc:/ @MichaelMarcialis @hbharding

[cchaos]

PR #4451 Has added a few prescribed props for creating most of these layouts including pageTitle, description, tabs and rightSideItems (for list of things like buttons or stats). The styling of the page header along with the updates for the whole page layouts are being updated in PR #4525.

These should support almost all of the use cases listed above. I think the only thing absent is the Ingest Manager package listing version with the large panelled logo that crosses the header and content. This one feels very specific to Ingest Manager and would rather opt for keeping that configuration maintained in the Kibana repo.

[ryankeairns]

That makes sense to me, thanks for the update!