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

セット商品・まとめ買いカード

複数商品を小さなサムネイルで並べたセット商品カードです。まとめ買い商品やギフトセットの紹介に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumbs">
            <span class="t t1"></span>
            <span class="t t2"></span>
            <span class="t t3"></span>
          </div>
          <div class="info">
            <p class="name">スキンケア3点セット</p>
            <p class="set">3点セット</p>
            <p class="price">¥7,900</p>
          </div>
        </div>

CSS

.d10-08-08 .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-08 .thumbs{display:flex;gap:4px;height:100px;background:#f4f1ec;padding:8px;}
        .d10-08-08 .t{flex:1;border-radius:6px;}
        .d10-08-08 .t1{background:linear-gradient(135deg,#f6d5a8,#f3a683);}
        .d10-08-08 .t2{background:linear-gradient(135deg,#c9e4de,#a2d9ce);}
        .d10-08-08 .t3{background:linear-gradient(135deg,#cfd9df,#e2ebf0);}
        .d10-08-08 .info{padding:12px 14px;}
        .d10-08-08 .name{font-size:13px;color:#333;margin:0 0 4px;}
        .d10-08-08 .set{margin:0 0 6px;font-size:10px;color:#8a6d3b;background:#faf1dc;display:inline-block;padding:2px 6px;border-radius:3px;}
        .d10-08-08 .price{margin:0;font-size:15px;font-weight:700;color:#333;}

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