<Card />

A bordered container that groups related content.

import {Card} from "attio/client"

A card is a styled variant of a Section component with predefined border, padding and a title. Lay the content out with a 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.

Example

src/app/pages/dashboard/page.tsx

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

title · string

A short heading shown above the card’s content. Titles are truncated rather than wrapped, so keep them to a few words.

children · React.ReactNode

The content of the card, either text or other components.