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

在庫ゲージバー付き商品カード

残り在庫の割合を横バーで可視化した商品カード。数量限定品の希少性を視覚的に伝えたい商品ページに使える。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb"></div>
          <div class="info">
            <p class="name">数量限定コラボスニーカー</p>
            <p class="price">¥14,000</p>
            <div class="stockbar"><i style="width:22%"></i></div>
            <p class="stocklabel">残りわずか</p>
          </div>
        </div>

CSS

.d10-08-12 .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-12 .thumb{height:110px;background:linear-gradient(135deg,#f3c4d1,#e0554f);}
        .d10-08-12 .info{padding:12px 14px;}
        .d10-08-12 .name{font-size:12.5px;color:#333;margin:0 0 6px;}
        .d10-08-12 .price{margin:0 0 8px;font-size:15px;font-weight:700;color:#333;}
        .d10-08-12 .stockbar{height:6px;border-radius:3px;background:#f0eee9;overflow:hidden;margin-bottom:5px;}
        .d10-08-12 .stockbar i{display:block;height:100%;background:#e0393e;border-radius:3px;}
        .d10-08-12 .stocklabel{margin:0;font-size:10.5px;color:#e0393e;font-weight:700;}

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