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

Content

Title

Title

Content

Actions

Title

Content

Card Info

Title

Short text

Content

Image

Title

Short text

Content

Nested

Title

Short text

Title

Content

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

1. Avoid nesting cards with more than 3 levels.
2. Add buttons for interactivity.
3. Do not use primary buttons when adding actions to the Card.

👉 For UX Writing guidelines, access https://uxwriting.vtex.com

• What is this?
• Container
• Title
• Actions
• Card Info
• Image
• Nested