<Card />

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. Available on pages, record tabs and in dialogs.

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

string

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

React.ReactNode

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

Introduction

Guides

Extensions

Pages

Workflow blocks

Notifications

Dialogs

Navigation

Components

Forms

Icons

Settings

GraphQL

Data fetching

Server

System

Legacy

Example

Props

​Example

​Props

Example

Props