> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.com/system-ui/theme-ui/llms.txt
> Use this file to discover all available pages before exploring further.

# Card

> Container component for grouped content with theme variants

The Card component is a layout primitive for grouping related content with consistent styling.

## Import

```jsx theme={null}
import { Card } from 'theme-ui'
```

## Usage

```jsx theme={null}
<Card>
  <Heading>Card Title</Heading>
  <Text>Card content goes here.</Text>
</Card>
```

## Props

<ParamField path="variant" type="string" default="'primary'">
  Card variant from `theme.cards`. The component uses `primary` variant by default.

  ```jsx theme={null}
  <Card variant="primary">Primary card</Card>
  <Card variant="compact">Compact card</Card>
  ```
</ParamField>

<ParamField path="sx" type="ThemeUIStyleObject">
  Theme-aware styles for custom card appearance.

  ```jsx theme={null}
  <Card
    sx={{
      p: 4,
      bg: 'background',
      borderRadius: 8,
      boxShadow: 'lg',
    }}
  >
    Custom styled card
  </Card>
  ```
</ParamField>

<ParamField path="as" type="React.ElementType">
  Render as a different HTML element. Defaults to `div`.

  ```jsx theme={null}
  <Card as="article">Article card</Card>
  ```
</ParamField>

### Inherited Props

Card extends Box and accepts:

* All standard HTML div attributes (or attributes for the element specified with `as`)
* Box spacing props (m, p, mx, my, px, py, etc.)
* Box color props (color, bg, opacity)

## Composition

Cards are designed to be composed with other Theme UI components:

```jsx theme={null}
<Card>
  <Image src="/image.jpg" />
  <Heading>Card Title</Heading>
  <Text>Description text</Text>
  <Button>Action</Button>
</Card>
```

## Examples

### Basic Card

```jsx theme={null}
<Card>
  <Heading as="h3">Card Title</Heading>
  <Text>This is a basic card with some content.</Text>
</Card>
```

### Card with Image

```jsx theme={null}
<Card>
  <Image src="/thumbnail.jpg" alt="Thumbnail" />
  <Box p={3}>
    <Heading as="h3">Product Name</Heading>
    <Text>Product description goes here.</Text>
    <Button mt={2}>View Details</Button>
  </Box>
</Card>
```

### Interactive Card

```jsx theme={null}
<Card
  sx={{
    cursor: 'pointer',
    transition: 'transform 0.2s',
    '&:hover': {
      transform: 'translateY(-4px)',
      boxShadow: 'lg',
    },
  }}
>
  <Heading>Hover Me</Heading>
  <Text>This card lifts on hover.</Text>
</Card>
```

### Card Grid

```jsx theme={null}
<Grid columns={[1, 2, 3]} gap={4}>
  <Card>
    <Heading>Card 1</Heading>
    <Text>Content</Text>
  </Card>
  <Card>
    <Heading>Card 2</Heading>
    <Text>Content</Text>
  </Card>
  <Card>
    <Heading>Card 3</Heading>
    <Text>Content</Text>
  </Card>
</Grid>
```

### Card with Footer

```jsx theme={null}
<Card>
  <Box p={3}>
    <Heading>Article Title</Heading>
    <Text>Article preview text...</Text>
  </Box>
  <Flex
    sx={{
      borderTop: '1px solid',
      borderColor: 'muted',
      p: 3,
      justifyContent: 'space-between',
    }}
  >
    <Text>Author Name</Text>
    <Text>2 min read</Text>
  </Flex>
</Card>
```

### Clickable Card

```jsx theme={null}
<Card as="a" href="/article" sx={{ textDecoration: 'none', color: 'inherit' }}>
  <Heading>Article Title</Heading>
  <Text>Click anywhere on this card to navigate.</Text>
</Card>
```

### Card with Badge

```jsx theme={null}
<Card sx={{ position: 'relative' }}>
  <Box
    sx={{
      position: 'absolute',
      top: 2,
      right: 2,
      bg: 'primary',
      color: 'white',
      px: 2,
      py: 1,
      borderRadius: 4,
      fontSize: 0,
    }}
  >
    New
  </Box>
  <Heading>Product Name</Heading>
  <Text>Product details</Text>
</Card>
```