Add CardHeader and 'cardHeight' prop to the Card component

[damian4291]

Desired behaviour

Hey guys, I am working on one of the Sage projects in which the Figma design is a bit inconsistent with Carbon's capabilities.

I do not want to combine too much to achieve the desired effect, so I come up with a proposal to slightly improve the Card component

Current behaviour

1. Its not possible to have CardHeader inside Card component which will look the same as CardFooter
2. Its not possible to set cardHeight prop on Card although it is possible to set cardWidth, so for example when Card component is inside GridItem which is taller, its not possible to extend height of the Card to match GridItem height

See JIRA for screnshot.

Suggested Solution

1. Create a CardHeader that will look similar to the CardFooter, but will be placed on top of the Card element.
2. Allow to set cardHeight prop on Card component,

CodeSandbox or Storybook URL

https://codesandbox.io/s/cold-https-qb56i1?file=/src/CashAccount.jsx

Anything else we should know?

No response

Confidentiality

• [X] I confirm there is no confidential or commercially sensitive information included.

[nicktitchmarsh]

This is not an established pattern in the Design System at the moment. Your designers should consult with DS to make sure appropriate research has taken place and to determine if this is a standard pattern we wish to use across Sage products. Once a decision has been made DS can raise the work with us.

[nicktitchmarsh]

I am closing this issue until DS raises a piece of work with us