EC・商品
商品カード
画像・お気に入り♥・SALEタグ・ブランド・商品名・星評価・価格（元値は取り消し線）・カート追加ボタンを収めたEC定番の商品カード。ホバーでふわっと持ち上がる。
プレビュー
クリック
操作クリック／タップで動きます。
コード（コピーして使えます）
<div class="pc-card" id="pcCard">
<div class="pc-media">
<span class="pc-tag">SALE</span>
<button class="pc-fav" id="pcFav" aria-pressed="false" aria-label="お気に入りに追加">
<svg class="pc-heart" width="20" height="20" viewBox="0 0 20 20" fill="none" aria-hidden="true">
<path d="M10 17s-6.2-3.9-8-8.1C.9 6.1 2.4 3.5 5.2 3.5c1.8 0 3 1 4.8 3 1.8-2 3-3 4.8-3 2.8 0 4.3 2.6 3.2 5.4C16.2 13.1 10 17 10 17z" stroke="currentColor" stroke-width="1.6" stroke-linejoin="round"/>
</svg>
</button>
<svg class="pc-img" viewBox="0 0 200 160" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<rect width="200" height="160" fill="url(#pcg)"/>
<rect x="66" y="40" width="68" height="86" rx="8" fill="#fff" opacity=".55"/>
<circle cx="100" cy="70" r="18" fill="#fff" opacity=".7"/>
<rect x="78" y="98" width="44" height="6" rx="3" fill="#fff" opacity=".5"/>
<defs>
<linearGradient id="pcg" x1="0" y1="0" x2="200" y2="160" gradientUnits="userSpaceOnUse">
<stop stop-color="#dce5f7"/>
<stop offset="1" stop-color="#c3d2f0"/>
</linearGradient>
</defs>
</svg>
</div>
<div class="pc-body">
<p class="pc-brand">CHIITSURU</p>
<p class="pc-title">リネンブレンド オーバーシャツ</p>
<div class="pc-rate">
<span class="pc-stars" role="img" aria-label="5点満点中4.5点">
<span class="pc-stars-bg">★★★★★</span>
<span class="pc-stars-fg" style="width:90%">★★★★★</span>
</span>
<span class="pc-rate-num">4.5</span>
<span class="pc-reviews">(128)</span>
</div>
<div class="pc-price-row">
<span class="pc-price">¥6,980</span>
<span class="pc-price-old">¥9,800</span>
</div>
<button class="pc-cart" id="pcCart">カートに入れる</button>
</div>
</div>