product | title | githubLabel |
---|---|---|
joy-ui |
React Card component |
component: card |
Cards contain content and actions about a single subject.
Cards are most frequently used for easy to scan, relevant, and actionable information. Joy UI provides four Card-related components:
Card
: a container to control the content direction.CardOverflow
: a handy component that takes care of stretching the content to fill all edges of the card.CardCover
: a container for displaying background images within the card, also used to create gradient layers.CardContent
: a wrapper that brings content to the front when used withCardCover
.
After installation, you can start building with this component using the following basic elements:
import Card from '@mui/joy/Card';
import Typography from '@mui/joy/Typography';
export default function MyApp() {
return (
<Card>
<Typography>Hello world!</Typography>
</Card>
);
}
Card
is a surface-level component that can house multiple others.
The most common components you'd use with it are Typography
, AspectRatio
, and Button
.
{{"demo": "BasicCard.js" }}
To have content spanning from edge to edge of the card, wrap it with the CardOverflow
component.
It automatically takes care of the top and bottom edges if rendered as the first or last child of the parent card.
{{"demo": "OverflowCard.js" }}
The CardCover
component is responsible for housing the content that covers the whole card.
Think of card covers as a background layer that stay behind the CardContent
.
{{"demo": "CardCovers.js" }}
Use a plain image or a video element inside the CardCover
to display media.
It uses object-fit: cover
on the image as a default value.
{{"demo": "MediaCover.js" }}
To create a gradient overlay, frequently seen when a colorful image is used as background, insert an additional CardCover
component.
:::warning Make sure to darken the gradient overlay up to have enough contrast between the background image and the text content. :::
{{"demo": "GradientCover.js" }}
To show a horizontal card, use the row
prop.
The CardOverflow
will adapt based on its position.
{{"demo": "RowCard.js" }}
By default, whenever you have additional action elements such as links and buttons, they stay on top of the whole interactive area.
In some cases, you might have to manually control each element's z-index
.
:::success
Use the CSS pseudo-class :focus-within
to style the card when any of its children are focused.
:::
{{"demo": "MultipleInteractionCard.js" }}
To make the entire card area clickable, wrap the card's title with the Link
component.
Then, add the overlay
prop to expand it.
By doing that, you ensure good keyboard navigation support given that the focus-visible
styles also apply to the entire card.
Learn more about best accessibility practices with cards in the Inclusive Component's documentation.
{{"demo": "InteractiveCard.js" }}
Play around with all the CSS variables available in the component to see how the design changes.
You can use those to customize the component on both the sx
prop and the theme.
:::success If you want to adjust a card's padding or border-radius, it's preferable to do it using the variables below instead of using CSS properties directly. That's because the variables will also be used to calculate a proper radius for the card's children. :::
{{"demo": "CardVariables.js" , "hideToolbar": true}}
This demo uses a similar technique to the flexbox holy albatross to stack the elements when the container's width is below a specified number.
{{"demo": "ContainerResponsive.js" }}
{{"demo": "DribbbleShot.js" }}
{{"demo": "InstagramPost.js" }}