---
title: "Card"
description: "A bordered surface that groups one subject: a summary, a settings group, a chart. Compose it from a header (title, description, action), content and a footer; leave out any part."
---

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

# Card

## Settings group

```tsx
import { Button, Card, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from '@arbol-ai/ui';

<Card className="max-w-md">
  <CardHeader>
    <CardTitle>Business hours</CardTitle>
    <CardDescription>When the agent books appointments.</CardDescription>
    <CardAction>
      <Button size="sm" variant="outline">
        Edit
      </Button>
    </CardAction>
  </CardHeader>
  <CardContent className="text-sm">Monday to Friday, 7:00 to 18:00</CardContent>
  <CardFooter className="text-muted-foreground border-t pt-6 text-xs">
    Times are in the clinic’s time zone.
  </CardFooter>
</Card>
```

## Summary

```tsx
import { Badge, Card, CardAction, CardContent, CardFooter, CardHeader, CardTitle, Link } from '@arbol-ai/ui';

<Card className="max-w-sm">
  <CardHeader>
    <CardTitle>Reminder campaign</CardTitle>
    <CardAction>
      <Badge tone="success">Running</Badge>
    </CardAction>
  </CardHeader>
  <CardContent>
    <p className="font-heading text-3xl font-medium">1,284</p>
    <p className="text-muted-foreground text-sm">contacts called this week</p>
  </CardContent>
  <CardFooter>
    <Link className="text-sm" href="#/card">
      Open the campaign
    </Link>
  </CardFooter>
</Card>
```

## Source

The examples above are [`src/components/card/card.examples.tsx`](https://github.com/getarbol/project-arbol-ui/blob/main/src/components/card/card.examples.tsx), which the library's tests render too.

Source: https://epidermis.getarbol.com/components/layout/card/index.mdx