Card

汎用のカード。ダッシュボードのタイルには DashboardCard を。

汎用のカードです。ダッシュボードのタイルには、余白とスケルトンまで組んである DashboardCard の方が向いています。

export const client = "only";

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardAction,
  CardContent,
  CardFooter,
  Button,
} from "@squadbase/vantage/ui";

export default function Example() {
  return (
    <Card className="w-96">
      <CardHeader>
        <CardTitle>今月の売上</CardTitle>
        <CardDescription>2026 年 7 月 1 日 〜 7 月 23 日</CardDescription>
        <CardAction>
          <Button variant="ghost" size="sm">
            詳細
          </Button>
        </CardAction>
      </CardHeader>
      <CardContent>
        <p className="text-3xl font-medium tracking-tight">¥1,240,000</p>
      </CardContent>
      <CardFooter className="border-t pt-4 text-muted-foreground">
        前月比 +12.4%
      </CardFooter>
    </Card>
  );
}

import {
  Card,
  CardHeader,
  CardTitle,
  CardDescription,
  CardAction,
  CardContent,
  CardFooter,
} from "@squadbase/vantage/ui";

パーツ

パーツ	役割
`Card`	枠。`size`: `default` \| `sm`（内側の余白が変わる）
`CardHeader`	見出し行
`CardTitle` / `CardDescription`	見出しと補足
`CardAction`	見出し行の右端。置くとヘッダーが自動で 2 列になる
`CardContent`	本文
`CardFooter`	下端。置くとカード下部の余白が自動で詰まる

余白は --card-spacing という CSS 変数 1 つで決まっているので、個別に上書きできます。

<Card className="[--card-spacing:--spacing(6)]">…</Card>