パーツ番号 10-08-11 ・ CSSのみ

定期購入バッジ付き商品カード

サブスクリプション商品であることを示すバッジと割引訴求を添えた商品カード。定期便・頒布会商品の一覧表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb">
            <span class="badge">定期便</span>
          </div>
          <div class="info">
            <p class="name">スペシャルティコーヒー豆200g</p>
            <p class="price">¥1,480<span class="unit">/ 月</span></p>
            <p class="note">15%OFFで自動お届け</p>
          </div>
        </div>

CSS

.d10-08-11 .card{width:180px;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06);}
        .d10-08-11 .thumb{position:relative;height:120px;background:linear-gradient(135deg,#d9c19a,#a9744f);}
        .d10-08-11 .badge{position:absolute;top:8px;left:8px;background:#3d5a80;color:#fff;font-size:11px;font-weight:700;padding:3px 8px;border-radius:4px;}
        .d10-08-11 .info{padding:12px 14px;}
        .d10-08-11 .name{font-size:13px;color:#333;margin:0 0 6px;}
        .d10-08-11 .price{margin:0 0 4px;font-size:15px;font-weight:700;color:#333;}
        .d10-08-11 .unit{font-size:11px;font-weight:400;color:#999;margin-left:2px;}
        .d10-08-11 .note{margin:0;font-size:10.5px;color:#c2670c;font-weight:600;}

クラス名 .d10-08-11 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。