部品 · Card
カード
共有Cardの構造、密度、action配置、実利用状態
- 利用範囲
- 一覧 / 詳細 / マイページ
- 更新日
- 2026-07-10
プレビュー
状態と使い方
店舗情報カード
異なる画面で共有する情報のまとまりです。
公開中
主要状態とメタ情報を同じ位置に置きます。
更新日は補足情報として扱います。
店舗情報
再利用できる単位で管理します。
公開中
クチコミ
再利用できる単位で管理します。
公開中
イベント
再利用できる単位で管理します。
確認中
記事
再利用できる単位で管理します。
確認中
主な部品
この仕様に含まれるUI
1 件
Card
コンテンツ構造
解剖
Card
面、境界、角丸、影、縦方向の間隔を提供する外枠。
Header
title、description、actionをcontainer query対応gridで配置する。
Content
本文、数値、一覧などカード固有の主要情報を置く。
Footer
補助情報または操作を置き、必要時だけborderを追加する。
状態
基本
タイトル、説明、本文を同じ読み順で表示する。
actionあり
右上actionをheaderの独立列へ固定する。
一覧
同種カードはgridで並べ、内部の情報順を変えない。
操作あり
詳細と編集などの操作はfooterへまとめる。
仕様値
- 角丸
- rounded-xl / 12px
- 外側
- border、shadow-sm、py 24px
- 内部間隔
- gap 24px、header/content/footer px 24px
- title
- font-semibold、leading-none
- description
- 14px、text-muted-foreground
- action
- header右上、row span 2
運用ルール
ページ区画をカード化しない
繰り返し項目または明確な情報単位だけに使う。
カードを入れ子にしない
階層はsection、separator、余白で表現する。
action位置を固定
同種カードで操作位置を変えず、比較しやすさを守る。