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

# <Card />

> A bordered container that groups related content.

```js theme={"system"}
import {Card} from "attio/client"
```

A card is a styled variant of a [Section](./section) component with predefined border, padding and a title. Lay the content out with a [`Stack`](./stack) inside the card. Cards do not nest. A card rendered inside another card keeps its title and content but is shown without its own border, so containers never stack.

Available on [pages](../pages/overview), [record tabs](../extensions/record-tab) and in [dialogs](../dialogs/show-dialog).

## Example

```tsx src/app/pages/dashboard/page.tsx theme={"system"}
import React from "react"
import {Extensions, Card, Stack, Typography, Badge} from "attio/client"

export default Extensions.definePage({
  name: "Dashboard",
  Page: () => (
    <Stack gap="large">
      <Card title="Open deals">
        <Stack direction="row" gap="small" align="center">
          <Typography.Title>42</Typography.Title>
          <Badge color="green">+6</Badge>
        </Stack>
      </Card>
      <Card title="Won this quarter">
        <Typography.Title>$1.2M</Typography.Title>
      </Card>
    </Stack>
  ),
})
```

## Props

<ParamField path="title" type="string">
  A short heading shown above the card's content. Titles are truncated rather than wrapped, so
  keep them to a few words.
</ParamField>

<ParamField path="children" type="React.ReactNode">
  The content of the card, either text or other components.
</ParamField>