Card
A surface that groups related content and actions, with header, body, media and action parts.
Card is a Paper that clips its children to the rounded corners. Build it from Card,
CardHeader, CardMedia, CardContent and CardActions. All five are Server Components.
import Card from '@hone-ui/react/Card';
import CardHeader from '@hone-ui/react/CardHeader';
import CardMedia from '@hone-ui/react/CardMedia';
import CardContent from '@hone-ui/react/CardContent';
import CardActions from '@hone-ui/react/CardActions';Examples
Boats come in as the light fades.
<Card sx={{ maxWidth: 320 }}>
<CardHeader title="Harbor at dusk" subheader="October 5" />
<CardContent>
<Typography variant="body2">Boats come in as the light fades.</Typography>
</CardContent>
<CardActions>
<Button size="small">Share</Button>
<Button size="small">Learn more</Button>
</CardActions>
</Card>With a header action and media:
<Card variant="outlined">
<CardHeader
title="Harbor at dusk"
subheader="October 5"
action={
<IconButton aria-label="settings">
<MoreVertIcon />
</IconButton>
}
/>
<CardMedia image="/cover.jpg" alt="Harbor at dusk" sx={{ height: 140 }} />
<CardContent>
<Typography variant="body2">Boats come in as the light fades.</Typography>
</CardContent>
<CardActions>
<Button size="small">Share</Button>
<Button size="small">Learn more</Button>
</CardActions>
</Card>Use component="article" or section, with an accessible name, when a card stands alone in a
list. To make a whole card clickable, put a Button or link inside it.
Card props
| Prop | Type | Default | Description |
|---|---|---|---|
variant | 'elevation', 'outlined' | 'elevation' | A shadow or a border. |
raised | boolean | false | Sets elevation 8 and overrides elevation. No effect on outlined. |
elevation | number from 0 to 24 | 1 | The shadow depth. |
square | boolean | false | Removes the rounded corners. |
component | ElementType | 'div' | The element to render. |
sx, className, style, ref, children | Standard. |
CardHeader props
| Prop | Type | Default | Description |
|---|---|---|---|
title | ReactNode | none | A string or number is wrapped in a Typography (h5, or body2 with an avatar). |
subheader | ReactNode | none | A string or number is wrapped in secondary Typography. |
avatar | ReactNode | none | Placed before the title. |
action | ReactNode | none | Placed at the end, aligned to the top. |
disableTypography | boolean | false | Renders title and subheader as given. |
slotProps | { title?, subheader? } | none | Typography props for each wrapped text. |
component, sx, className, style, ref | Standard. |
CardMedia props
| Prop | Type | Default | Description |
|---|---|---|---|
image | string | none | A CSS background image on a plain element. On img, video, audio, picture or iframe it acts as src. |
src | string | none | The src attribute. Wins over image on a media element. |
alt | string | none | alt on a media element. On a background it becomes aria-label with role="img". |
component, sx, className, style, ref, children | Standard. |
A background has no height of its own. Set one with sx or style.
CardContent props
component, sx, className, style, ref and children. It adds 16px of padding, and 24px
below when it is the last child.
CardActions props
| Prop | Type | Default | Description |
|---|---|---|---|
disableSpacing | boolean | false | Removes the 8px gap between actions. |
component, sx, className, style, ref, children | Standard. |
Notes
- None of the card parts reads
components.Card*.defaultProps, because they are Server Components. - No
CardActionArea. - CardHeader drops the deprecated
titleTypographyPropsandsubheaderTypographyProps. UseslotProps.
Accessibility
Card adds no role. The CardHeader title renders as a span, not a heading. Pass
disableTypography with your own heading when the card needs one. A CardMedia background with
alt gets role="img". Use alt="" on an img that only decorates.