カード

component

関連する情報をひとまとまりにして枠で囲うコンテナです。ヘッダー（タイトル＋補足）・本文・フッターで構成します。

プロジェクト A

最終更新: 2026-05-25

これは標準的なカードです。ヘッダー・本文・フッターを持ちます。

シンプルカード

ヘッダー / フッターを省略した最小構成。カードの区切りは影でなく外枠のボーダーで示します。

バリエーション

アイコン・画像・メタデータ・アクションは任意のパーツで、必要なものだけ組み合わせます。

アイコン ＋ メタデータ ＋ アクション

  • プロジェクト A

    事業承継の準備を進めるプロジェクト

    譲渡条件の整理と、候補者との面談日程を調整しています。

    • 12 人
    • 2026-05-25
  • 本人確認

    アカウントの安全性を高める

    書類を提出すると、案件への問い合わせができるようになります。

    • 約 5 分
    • 書類 2 点

アクションのみ

月次レポート

2026 年 8 月分

問い合わせ 24 件、面談 6 件、成約 1 件でした。

画像付き

  • カフェ事業の承継

    東京都 / 飲食

    地域で 20 年続くカフェの後継者を募集しています。

    • 1,240 閲覧
    • 2026-05-25 掲載

クリッカブル

.card-clickable ＋ .card-link — カードのどこを押しても詳細ページへ移動する。見出しの中の <a class="card-link"> の当たり判定をカード全面に広げる方式で、読み上げ・Tab の対象はこのリンク 1 つ。中に置いたメニューやボタンは前面に出て、それぞれ単独で押せる。

  • カフェ事業の承継

    東京都 / 飲食

    地域で 20 年続くカフェの後継者を募集しています。

    • 1,240 閲覧
    • 2026-05-25 掲載
  • プロジェクト A

    事業承継の準備を進めるプロジェクト

    カードを押すと詳細へ、右上のメニューはカードとは別に押せます。

hover

is-hover-preview の見本

focus

is-focus-preview の見本

<li class="card card-clickable">
  <div class="card-header">
    <h3 class="card-title"><a class="card-link" href="/projects/a">プロジェクト A</a></h3>
    <div class="card-action">…メニューの icon-btn（前面に出て単独で押せる）…</div>
  </div>
  <div class="card-body">…</div>
</li>

<!-- 1 つの操作（モーダルを開く等）なら button -->
<h3 class="card-title"><button type="button" class="card-link">プロジェクト A</button></h3>

compact

.card-compact — 同種のカードを密に並べる一覧向け。左右 16・見出し上下 12・本文 16。見出し＋短い説明だけで組み、アイコンは付けない。

  • プロフィール

    名前・自己紹介を編集

  • 通知

    メール・プッシュ通知の設定

  • セキュリティ

    パスワード・2 段階認証

body flush

.card-body-flush — 本文の padding を 0 にし、見出し付きのリストをカード幅いっぱいに敷く（行側で左右 24 を取る）。

最近の問い合わせ

直近 7 日間

  • カフェ事業の承継3 件
  • 製造業の事業譲渡1 件
  • 美容室の後継者募集5 件

機能

このコンポーネントの用途

関連情報をグループ化して見せる枠。最前面に重ねて操作を止めるなら modal。
同種のカードを並べた一覧（案件・プロジェクト等）にも使う。
card-clickable は、カードのどこを押しても詳細ページへ移動する（または 1 つの操作をする）カード。
中に置いた別のボタン・リンク（card-action のメニュー等）はそれぞれ単独で押せる。
カードを選ぶ（選択状態を持つ）なら card-clickable ではなく checkbox / radio。