cc-header-orga: tweak the design to make premium more subtle and allow extra content

[florian-sanders-cc]

Context

In the cc-credit-consumption component, we want to use the cc-header-orga component but we would also like to add extra information within it:

• the active billing cycle,
• a link to a page showing a chart with consumption data from the past 6 months.

The current design of the cc-header-orga is not really adapted for this.

We would need to make the premium info a little bit more subtle and add a slot to the component.

Solutions

I think a simple solution would be to get closer to the design of our other cc-header components with a footer to free up some space within the header itself.

[florian-sanders-cc]

First idea:

• Slotted content within the header, next to the orga name. We can align the slotted content on the left or on the right but for the example I went for the latter.
• Premium info go to a footer with a very slightly highlighted background.

[florian-sanders-cc]

Second idea:

• Slotted content below the orga name,
• Premium info on the right side of the header.

[florian-sanders-cc]

Third idea:

• Slotted content in a footer with a slightly highlighted background,
• Premium info on the right side of the header.

[Galimede]

Imo, I think I like the first option more:

• It has some icons
• It gets some coherence with the cc-header-app which I think is great
• The only thing that questions me is the length of the text and the link within the main block

I tend to also like the second option but a bit less. Indeed, if we're in the last case there's a lot of information within the block and might lack some space.

And finally I'm really not into the third option, the color of the link with color of the lower "block" background makes it a big no for me.

[pdesoyres-cc]

1 > 2 > 3 🌞

[roberttran-cc]

From a design perspective, I think I prefer option 1 the most: overall most balanced in my opinion. 👌

But from a content perspective, there's a case with option 3: in the page where the component will be integrated, it will be displayed above with the content below it.
Meaning the page content and the component footer (which displays information about said content) will be close to each other and that will induce to the user that the two of them are related.

Which is maybe less obvious with option 1. Or maybe it's just me? 🤔

[florian-sanders-cc]

@Galimede @roberttran-cc thanks for your input, what do you think of the two options below?

[Galimede]

With these two options, I think I prefer the alignment of the first option. I also think that I prefer this version over the previous first idea 👍

[roberttran-cc]

Nice proposal: it tackles a lot of use cases and behaves well on all scenarios. 👍
And I don't have an opinion between these two options: I guess it is highly context dependent.

PS: I expect the footer content being slotted and its background customisable with a CSS custom property 👀

[HeleneAmouzou]

Thanks for your differents proposals.
Between the last 2 options, I prefer the first one that looks more balanced to me with the alignment in the footer.

[hsablonniere]

First poll: option 1
Second poll: option 1

I like to have the orga details in the main area and the contextual stuffs in the bottom grey banner.