Thinca Design System

Home / Components / Card

Card (Surface)

情報の境界を明示する基本コンテナ。顧客や履歴など 1 つの「オブジェクト」をカプセル化し、複数の属性を意味のある塊として提示する。

余白

内側余白 (Default 16px / Wide 24px) を切り替えるとプレビューとコードが連動します。

ここに情報を入れる
import { Card } from "@/components/Card";

<Card padding="default">
  ここに情報を入れる
</Card>

Card 内に別コンポーネント

Card は他コンポーネントを内包するコンテナ。顧客情報・編集フォーム・操作群などをまとめる典型例。

顧客情報カード

山田 太郎

03-1234-5678 / yamada@example.com

会員番号: VIP-001

登録日: 2024-04-01

担当者: 鈴木 花子

フォームカード

連絡先を追加

仕様

寸法・色

  • 背景: --card-color-bg (#FFFFFF)
  • ボーダー: --card-color-border (#D1D5DB) 1px
  • 角丸: --radius-m (8px)
  • Padding: Default = 16px / Wide = 24px

Shadow

  • 0 1px 2px 0 rgba(31,41,55,0.30) (LAYER1)

利用基準

使うべき時

  • 顧客や履歴などの 1 つのオブジェクトを「意味のある塊」として表現
  • ダッシュボードの分析パネル、AI 要約モジュールなどの機能ユニット
  • 余白だけでは情報の優先度が伝わらない場面

使わない時

  • 表 (Table) で大量の行データを並列に比較する場合
  • 単なる視覚的区切り → Separator や余白で十分
  • ボタンと等価の単純なアクション → Button を使う

Figma

Figma で Card コンポーネントセットを開く ↗