商品カード（バッジ + 価格）

解説

商品カードは、サムネイル・タイトル・価格に SALE などのバッジを添えた EC 向けの基本部品です。バッジは画像エリアに position:absolute で重ね、価格は通常価格を s タグの打ち消し線で並べて割引感を出しています。カード全体には transition が効いており、:hover で translateY によりわずかに浮き上がり、影が濃くなる動きが付いています。

使う場面

• ネットショップの商品一覧やおすすめ枠
• 「新着」「セール」など状態を示したい商品リスト
• サービスやコンテンツをタイル状に並べるグリッド

バッジの文言や色は .pr-card__bd で、ホバー時の浮き具合は :hover の transform と box-shadow で調整します。画像部分は現在グラデーションなので、実運用では実写のサムネイルに差し替えてください。複数枚を並べるときは、親側で display:grid を使うと等間隔のタイル表示になります。prefers-reduced-motion を指定して、動きを控えたい利用者には浮き上がりを無効化する配慮も加えられます。価格や商品名はテキストで持たせ、画像内に焼き込まないことが読み上げ・検索の両面で有利です。

使用例・適したシーン

• サービス紹介セクション
• メンバー紹介・スタッフ一覧
• 料金プラン比較
• 実績・事例カード