material-ui > Card
Material UI Card Tutorial and Examples | React.School
Material UI Card vs Paper
<Card> component from Material UI is exactly the same as the
<Paper> component, there are no differences
except you have an option to add a
raised prop which simply sets the
elevation prop of the Paper to 8. You can
also just use
elevation itself, or any of the other props found in the Paper component. See our Paper tutorial and examples
for more details on Paper.
What is different about the Card component page on Material UI's documentation is that it shows examples for other components in the Card family, as we'll describe below.
These components below are all fairly simple in that they apply certain CSS styles that will help you space out
your content in different ways. For example, the
<CardContent/> is just a single
<div> with some padding. Use it
inside your Card or Paper or other component to get some padding for your elements. The
<CardActionsArea/> is useful
if you want to have styles added for focus, hover or click on the content. If you needed to, for example, have
an action on click of the content of an entire Card, you would wrap it around your
<CardActions/> component is another very simple component- just a
display: flex to turn it into a
align-items: center to vertically align whatever elements you have inside, padding of
8px, and then margin
such that there is always
8px between each element.
In no way do you need to use these components inside a Card, you can use them anywhere.
Wraps children in a single
<div> and applies 16px of padding, and 24px padding-bottom when it is the last child in the group.
Wraps children in a single Button, creating a ripple effect when clicked.
CardActions is just a flexbox component that wraps the children in 8px of padding and 8px horizontal padding between children.
A complex component with flexbox set as the root component, with an avatar, title, subheader and action.
A single div element that sets background-image properties to cover the available space with an image.