レイアウト・構造
カードレイアウト
画像帯・見出し・本文・メタ情報を縦に積んだ、王道のコンテンツカード。一覧にも詳細にも使える、最も基本的なカード部品。
プレビュー
静的
操作動きのない質感・レイアウトの見本です。
実装メモ
画像は linear-gradient のダミーです。実運用では .card-media を <img style="width:100%;height:120px;object-fit:cover"> などに置き換えてください。
コード（コピーして使えます）
<div class="stage">
<article class="card">
<div class="card-media" role="img" aria-label="記事のサムネイル"></div>
<div class="card-body">
<span class="card-tag">デザイン</span>
<h3 class="card-title">余白でつくる、読みやすいカード</h3>
<p class="card-text">画像・見出し・本文・メタを縦に積むだけで、情報の優先順位が自然に伝わります。</p>
<div class="card-meta">
<span class="card-avatar" aria-hidden="true"></span>
<span class="card-author">中村 あおい</span>
<span class="card-dot" aria-hidden="true">·</span>
<span class="card-date">7月13日</span>
</div>
</div>
</article>
</div>