Card

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>

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>