Card

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardHeading,
  CardTitle,
} from "@tilt-legal/cubitt-components/card";

<Card className="w-full max-w-md" hoverable>
  <CardHeader>
    <CardHeading>
      <CardTitle>Activity Summary</CardTitle>
      <CardDescription>
        Use `hoverable` when a card needs a subtle surface shift on hover.
      </CardDescription>
    </CardHeading>
  </CardHeader>
  <CardContent>
    <p className="text-fg-2 text-sm">
      This card transitions from `surface-1` to `surface-2` while keeping the
      same structure and spacing.
    </p>
  </CardContent>
</Card>

import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardHeading,
  CardTitle,
  CardToolbar,
} from "@tilt-legal/cubitt-components/card";
import { Label } from "@tilt-legal/cubitt-components/label";
import { Switch } from "@tilt-legal/cubitt-components/switch";
import { Gear } from "@tilt-legal/cubitt-icons/ui/outline";

<Card className="w-full max-w-md">
  <CardHeader>
    <CardHeading>
      <CardTitle>Settings</CardTitle>
    </CardHeading>
    <CardToolbar>
      <Button mode="icon" variant="secondary">
        <Gear />
      </Button>
    </CardToolbar>
  </CardHeader>
  <CardContent>
    <div className="space-y-3">
      <Label orientation="horizontal" className="justify-between">
        Email notifications
        <Switch />
      </Label>
      <Label orientation="horizontal" className="justify-between">
        Push notifications
        <Switch defaultChecked />
      </Label>
    </div>
  </CardContent>
</Card>

import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardHeading,
  CardMeta,
  CardTitle,
} from "@tilt-legal/cubitt-components/card";
import { Clock } from "@tilt-legal/cubitt-icons/ui/outline";

<Card className="w-full max-w-md">
  <CardMeta>
    <Clock className="text-fg-1" />
    <span>Updated 2 hours ago</span>
  </CardMeta>
  <CardHeader>
    <CardHeading>
      <CardTitle>Project Overview</CardTitle>
      <CardDescription>Track your project progress</CardDescription>
    </CardHeading>
  </CardHeader>
  <CardContent>
    <p className="text-sm">
      CardMeta can be placed at the top of a card to show metadata like
      timestamps, categories, or tags.
    </p>
  </CardContent>
</Card>

import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Card,
  CardContent,
  CardDescription,
  CardFooter,
  CardHeader,
  CardHeading,
  CardMeta,
  CardTitle,
} from "@tilt-legal/cubitt-components/card";

<Card className="w-full max-w-md">
  <CardHeader>
    <CardHeading>
      <CardTitle>Article Title</CardTitle>
      <CardDescription>Read the full article</CardDescription>
    </CardHeading>
  </CardHeader>
  <CardContent>
    <p className="text-sm">
      CardMeta can also be placed at the bottom of a card for footer-style
      metadata.
    </p>
  </CardContent>
  <CardFooter>
    <Button className="w-full">Read More</Button>
  </CardFooter>
  <CardMeta className="justify-between">
    <span>Published: Jan 15, 2025</span>
    <span>5 min read</span>
  </CardMeta>
</Card>

import {
  Avatar,
  AvatarFallback,
} from "@tilt-legal/cubitt-components/avatar";
import { Badge } from "@tilt-legal/cubitt-components/badge";
import { Button } from "@tilt-legal/cubitt-components/button";
import {
  Card,
  CardContent,
  CardHeader,
  CardHeading,
  CardMeta,
  CardTitle,
  CardToolbar,
} from "@tilt-legal/cubitt-components/card";
import { ChartActivity, Plus } from "@tilt-legal/cubitt-icons/ui/outline";

const users = [
  {
    id: "1",
    name: "Kathryn Campbell",
    email: "kathryn@example.com",
    status: "active",
  },
  {
    id: "3",
    name: "Sophia Johnson",
    email: "sophia@example.com",
    status: "active",
  },
  {
    id: "2",
    name: "Robert Smith",
    email: "robert@example.com",
    status: "inactive",
  },
  {
    id: "4",
    name: "Sophia Johnson",
    email: "sophia@example.com",
    status: "active",
  },
  {
    id: "5",
    name: "Kathryn Campbell",
    email: "kathryn@example.com",
    status: "active",
  },
];

<Card className="w-full max-w-md">
  <CardMeta>
    <ChartActivity />
    <span>32 new users this week</span>
  </CardMeta>
  <CardHeader>
    <CardHeading>
      <CardTitle>Recent Users</CardTitle>
    </CardHeading>
    <CardToolbar>
      <Button variant="secondary">
        <Plus />
        Add user
      </Button>
    </CardToolbar>
  </CardHeader>
  <CardContent className="gap-0 py-0">
    {users.map((user) => (
      <div
        key={user.id}
        className="flex items-center justify-between gap-2 border-border-3 border-b py-4 last:border-none"
      >
        <div className="flex items-center gap-3">
          <Avatar className="size-8">
            <AvatarFallback className="text-sm">
              {user.name
                .split(" ")
                .map((n) => n[0])
                .join("")}
            </AvatarFallback>
          </Avatar>
          <div>
            <div className="font-medium text-sm">{user.name}</div>
            <div className="text-fg-2 text-xs">{user.email}</div>
          </div>
        </div>
        <Badge variant={user.status === "active" ? "brand" : "secondary"}>
          {user.status.charAt(0).toUpperCase() + user.status.slice(1)}
        </Badge>
      </div>
    ))}
  </CardContent>
</Card>