カードCardExperimental
ヘッダー・本文・フッター付きのカードを表示します。
プレビュー
プロジェクト概要
状態、担当者、次の確認事項をまとめます。
カードはページ内で情報を区切るためのコンテナです。
状態とバリエーション
指標カード
数値、補足、差分を短く見せるカードです。状態の強調には Badge を組み合わせます。
月間売上
+12.4%
452万円
前月比 +48万円
メディアカード
画像、タイトル、説明、分類をまとめるカードです。画像面は ImagePreview を組み合わせます。
メディアライブラリ
表示
キャンペーンで使うメインビジュアル候補です。
コンテンツカード
商品、記事、テンプレートなど、一覧に並ぶ項目の概要と次の操作を表示します。
商品
新着
ワークステーション Pro
制作、分析、レビュー作業向けの高性能モデルです。
価格248,000円
アバター付き記事カード
記事やお知らせの一覧では、著者のアバター、所属、分類を添えて発信元を分かりやすくします。
青
青井 花
デザイン編集部
記事
レビューしやすい一覧画面の作り方
大量の項目を比較しながら確認する画面で、視線を迷わせないための設計メモです。
読了目安 6分
SNSタイムラインカード
タイムライン上の投稿では、発信者、時刻、本文、反応数をひとまとまりのカードとして扱います。
田
田中 空
12分前
@sora
テーブルのキャプションと見出し背景を揃えたら、本文行との役割の違いがかなり読み取りやすくなりました。
返信 4共有 12保存 28
アクション付きカード
ページ内の情報に対して、補助操作や主要操作を並べるカードです。作業を中断して確認させる場合は Dialog を使います。
招待を送信
権限と参加先ワークスペースを確認してください。
読み込み中
最終表示と同じ高さを保ち、読み込み完了時にレイアウトが動かないようにします。
プロパティ
表は横にスクロールできます
| プロパティ | 型 | 初期値 | 説明 |
|---|---|---|---|
| className | string | - | カードルートへ追加するクラスです。 |
| children | ReactNode | - | カード内に配置するヘッダー、本文、フッターなどの内容です。 |
| CardHeader / CardContent / CardFooter | React.HTMLAttributes<HTMLDivElement> | - | カード内の見出し、本文、フッターを分けるためのスロットです。 |
使い方
Loading...