カード

hc-card は、枠線と控えめな角丸、任意のヘッダー / ボディ / フッターのパーツを持つ薄いコンテナです。レイアウトのプリミティブであり、インタラクションや状態を所有するものではありません。

別名: パネル、タイル。

基本の HTML

Two items, shipping on Friday.

<article class="hc-card">
  <header class="hc-card__header">Order #123</header>
  <div class="hc-card__body">
    <p>Two items, shipping on Friday.</p>
  </div>
  <footer class="hc-card__footer">
    <button class="hc-button" type="button" data-size="sm">View</button>
  </footer>
</article>

パーツは任意です。.hc-card__body だけのカードでも構いませんし、パーツがまったくないカードでも大丈夫です — 直接の子はボディと同じパディングを得るため、素のコンテンツも正しく見えます。

バリアント

<article class="hc-card">
  <div class="hc-card__body">
    <h3>Heads up</h3>
    <p>A card without an explicit header still works.</p>
  </div>
</article>

カードグリッドには、hc-card を好みのレイアウトプリミティブ (CSS グリッド、hc-stack ユーティリティ、任意のフレックスコンテナ)と組み合わせてください。カード自体は水平方向の間隔を強制しません。

アクセシビリティ

カードのルートには最も正確なランドマーク要素を使ってください:
- 自己完結したコンテンツには <article>;
- ページ内のテーマ的グルーピングには <section>;
- ランドマークのセマンティクスが当てはまらなければ <div>。
カードの見出しはページの見出し階層に合わせるべきです。カードが小さいからといってレベルを飛ばさないでください。

テーマ用トークン

トークンパス	用途
`card.bg`	背景色。
`card.fg`	前景色。
`card.border`	外側の枠線色。
`card.header-border`	パーツ間の区切り線。
`card.radius`	角丸。
`card.padding`	各カードパーツのパディング。

CSS 変数

生成される CSS 変数を表示

--hc-card-bg | -fg | -border | -header-border
--hc-card-radius
--hc-card-padding

カード

基本の HTML

バリアント

アクセシビリティ

テーマ用トークン

CSS 変数

関連