UI Component Lab English

← コンポーネント一覧

データ表示

Card カード

商品や記事など、1つの話題についての内容と操作をまとめた箱。

週末の京都

2日間・36,000円から

午前は寺社めぐり、午後は茶屋でひと休み。

見分けるポイント

角の丸い長方形で、枠線か影がある。上に画像、その下に見出し・短い文・ボタンが並ぶことが多い。

挙動

  • 一覧で見比べられるよう、格子状に並べることが多い。
  • カード全体をリンクにするなら、中に別のボタンやリンクを置かない。このデモはボタンがあるため、操作できるのはボタンだけにしている。
  • 各カードは見出しを名前にした <article> にする。

キーボード操作

キー動作
Tabカード内のボタンやリンクへ移動する。
Enter / Spaceフォーカス中のボタンを押す。

使い分け・注意点

  • カード全体を押せるようにするなら、中にリンクやボタンを置かない。
  • 影だけに頼らず、背景とのコントラスト比 3:1 以上の枠線で区切る。

出典