Shared Header component?

[oliverlloyd]

Header

How about we have a shared Header component?

There's already been some work in this space as well as meetings and discussions and from this I think it's fair to say there's general agreement that this is a good idea but there are still some outstanding questions:

1. Should we use the Roundel the TheGuardian word mark? (or both depending on breakpoint?)
2. What height should the header be?
3. Does it need a title on the left?
4. Where should the MyAccount dropdown sit?
5. Where should links sit?
6. Do we want to try and encapsulate the main site header or just focus on admin use cases?
7. Should this component manage column logic (left and right margins at wider breakpoints) or stretch to it's parent and let the calling component manage this?

[dom-whooley]

As you say some of the work has been already done on this in the design system. Can we list urls here where the examples above have come from, that should help our investigation and decision making.

[oliverlloyd]

Can we list urls here where the examples above have come from

I'm getting examples from these pages

https://manage.theguardian.com/help-centre
https://profile.theguardian.com/reset
https://manage.theguardian.com/billing
https://www.theguardian.com/about/history
https://www.theguardian.com/uk

[dom-whooley]

https://www.theguardian.com/email-newsletters?INTCMP=DOTCOM_NAV_NEWSLETTER_US

[oliverlloyd]

That looks like the immersive header
https://www.theguardian.com/news/2021/may/06/between-two-worlds-a-chinese-american-story

I wonder if that's maybe a different thing - it's more like the Nav but with a Roundel on the side. (Nav as in the Pillar nav that sits underneath the Header on most articles).

On the other hand, it is a 'header' in these contexts 🤷

[dom-whooley]

Yeah, it looks the same as the immersive header. I posted it here to reference where these variations happen.