Card
What is this?
Cards, like any container, improves scannability of a design, providing a separate space for a user to focus on a specific task.
Container
Loading...
Title
Loading...
Actions
Loading...
Card Info
Loading...
Image
Loading...
Nested
Loading...
Usage
import {
Card,
CardHeader,
CardInfo,
CardTitle,
CardActions,
CardContent,
CardImage,
} from '@vtex/admin-ui'
export function Example() {
return (
<Card>
<CardHeader>
<CardInfo>
<IconImageSquare />
<CardTitle>Title</CardTitle>
<Tag label="Short text" />
</CardInfo>
<CardActions>
<Button variant="tertiary">Label</Button>
<Button variant="secondary">Label</Button>
</CardActions>
</CardHeader>
<CardContent>Content</CardContent>
</Card>
)
}
Props
Card
Extends all the props of div JSX element.
CardHeader
Extends all the props of div JSX element.
CardInfo
Extends all the props of div JSX element.
CardImage
Extends all the props of img JSX element.
CardHeader
Extends all the props of p JSX element.
CardActions
Extends all the props of div JSX element.
CardContent
Extends all the props of div JSX element.
Do’s
- Avoid nesting cards with more than 3 levels.
- Add buttons for interactivity.
- Do not use
primarybuttons when adding actions to theCard.
👉 For UX Writing guidelines, access https://uxwriting.vtex.com