ホーム/コンポーネント/データ表示/カード Card

Card

コンテンツをグループ化するカードコンポーネント。タイトルとアクションを指定可能。

import { Card } from "@blueai/ui"

Examples

Basic

カードの内容です。

<Card>
  <p className="text-[13px] text-text-secondary">カードの内容です。</p>
</Card>

With title

売上概要

今月の売上データです。

<Card title="売上概要">
  <p className="text-[13px] text-text-secondary">今月の売上データです。</p>
</Card>

With title and action

チームメンバー

メンバー一覧を表示します。

<Card title="チームメンバー" action={<FormButton size="sm" variant="outline">追加</FormButton>}>
  <p className="text-[13px] text-text-secondary">メンバー一覧を表示します。</p>
</Card>

Props

Prop	Type	Default	Description
children*	ReactNode	—	カードの内容
title	string	—	カードタイトル
action	ReactNode	—	右上に配置するアクション
className	string	—	追加CSSクラス