Proposal of a new area (banner area) on Card Component

[fhembecker]

Feedback summary

Improvements

In accordance with the decisions of the marketplace transformation and in order to use a component that reflects the new design of the Card component, we suggest making it possible to display an optional area at the top of the card.

Like a banner (e.g. <Card.BannerCap> or similar) so that we can show additional information about the card, such as the type of product (e.g. Certificate Program), "share" and "save for later" options or other components/text/links.

The idea is to standardize this area with regard to its positioning on the Card, making it possible to define the background color and content (like <Card.Section> where we can define its content).

As this banner can be optional, the Card's current design can still be used.

In the image below:
(left) current representation of the Card component
(right) template of the new Card component design with the banner area highlighted in red

Bugs

[wittjeff]

The card item on the left has a single actionable child (Action 1 button), so having the whole care accept clicks and show a focus state change would be helpful. For the card item on the right, there are three actionable controls within the card, and first two have context with this card, so their Accessible Names should be unique to the card. The optimal semantic container might change for each example (this is why there is no ARIA role for card). I'm not suggesting any visual changes are needed, just noting that there may be a need for a different parent component and different focus change styling behavior depending on the use case.