Components: Material cards to support header with different background-color than body

[walhow]

Bug, feature request, or proposal:

Proposal: support different background-color for Card header than body

What is the expected behavior?

Background color on card-header would be different than card body.

What is the current behavior?

Cards (and material in general?) seem to only support headers with same background-color as body.

What are the steps to reproduce?

Look at card sample on angular.material.io/.../card.

or look at this blitz:

https://stackblitz.com/edit/angular-mdnzpi

What is the use-case or motivation for changing an existing behavior?

Customer wants a different look for material cards (i.e. headers with background color).

Which versions of Angular, Material, OS, TypeScript, browsers are affected?

Most recent material.

Is there anything else we should know?

It's interesting that in the documentation, there is a div with a different colored header (see 'Basic cards' in material_card.png attachment), but then the material component itself ('Simple card') is all (header and body) the same background-color.

[donroyco]

See #9696 and @jelbourn's comment there:

We don't have any plans to turn this into an API. You should be able to use CSS to customize the background color, or SCSS to pull the color from the current theme.

[josephperrott]

Closing, as noted above, you are able to set use CSS to customize the background color directly.

[angular-automatic-lock-bot[bot]]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{_This action has been performed automatically by a bot._}