Provide helper (or an example in docs) of interactive Card component

Material Design defines that card can be interactable (button like). This is how the first example of MCW Card component behaves.

This is currently perfectly do-able with ButtonBase, as I answered in this SO question.

I also updated the CodeSandbox example with a new one to include overflow:hidden on the Card so that the button top corners are rounded. In the library this shouldn’t happen since that will cause breaking clipping issues, so this is something to solve somehow.

My proposal is to either

• introduce a new component, such as CardActionableContent (bad name, I know) or
• a button prop to CardContent.

Having even just an example would help, but it requires some styles to be applied to the card and this looks like a common enough case to be covered by the APIs.

• I have searched the issues of this repository and believe that this is not a duplicate.

Sorry if I removed the rest of the parts of the issue template, they didn’t apply here since it is more of a feature request.

[yuchi]

Now that I re-read the thread I’m totally into CardActionArea and CardActions.

[yuchi]

I fear the whole Card component is off the spec. For example CardContent has inline-sides padding of 3 units (≈24px) while this nowhere to be found in the spec.

Edit: Sorry, I missed the discussion in #10044. I still believe CardContent/Action components shouldn’t have variable gutters. They always are 16px in the .ai templates they provide.