カテゴリーバナーカード

解剖

• 写真

  カテゴリごとの写真をcoverとcenterで全面表示し、画像がない場合は既定写真を使う。

• 日本語タイトル

  先頭に18px、md以上20pxの太字で表示する。

• 英字補助

  日本語の下に12px uppercaseと広い字間で表示する。

• オーバーレイ

  左からblack 60%、30%、transparentの横グラデーション。

状態

• 通常

  写真は暗くしすぎず、左グラデーションで文字を支える。

• ホバー

  写真を少しだけ拡大し、カードの影を強める。

• 押下

  カード全体をscale 0.98にする。

• fallback

  未知slugは英字名をslugから生成し、既定画像を表示する。

仕様値

高さ

コンテンツ駆動。SP py 20 / PC py 28px

角丸

rounded-xl / 12px

余白

左右24px

レイヤー

画像、横グラデーション、日本語、英字

動き

画像scale 1.05 / 500ms、shadow / 300ms

押下

active scale 0.98