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

在庫状況表示付き商品カード

残数を明示するラベルを添えた商品カードです。在庫僅少の商品で購買を後押ししたいページに向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb"></div>
          <div class="info">
            <p class="name">ハンドメイド陶器マグカップ</p>
            <p class="price">¥2,200</p>
            <p class="stock">残り3点</p>
          </div>
        </div>

CSS

.d10-08-03 .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-03 .thumb{height:120px;background:linear-gradient(135deg,#d9c5a0,#b08968);}
        .d10-08-03 .info{padding:12px 14px;}
        .d10-08-03 .name{font-size:13px;color:#333;margin:0 0 6px;}
        .d10-08-03 .price{margin:0 0 6px;font-size:15px;font-weight:700;color:#333;}
        .d10-08-03 .stock{margin:0;font-size:11px;color:#e0393e;font-weight:600;}
        .d10-08-03 .stock::before{content:"";display:inline-block;width:6px;height:6px;border-radius:50%;background:#e0393e;margin-right:5px;}

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