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

新商品バッジ付き商品カード

角に新着ラベルを掲げた商品カードです。入荷したばかりの新商品を一覧の中で目立たせたい場合に使います。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb">
            <span class="ribbon">NEW</span>
          </div>
          <div class="info">
            <p class="name">コードレスイヤホン</p>
            <p class="price">¥8,900</p>
          </div>
        </div>

CSS

.d10-08-10 .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-10 .thumb{position:relative;height:120px;overflow:hidden;background:linear-gradient(135deg,#b8b5e1,#8f8ad1);}
        .d10-08-10 .ribbon{position:absolute;top:10px;right:-28px;transform:rotate(45deg);background:#333;color:#fff;font-size:10px;font-weight:700;padding:3px 32px;letter-spacing:1px;}
        .d10-08-10 .info{padding:12px 14px;}
        .d10-08-10 .name{font-size:13px;color:#333;margin:0 0 6px;}
        .d10-08-10 .price{margin:0;font-size:15px;font-weight:700;color:#333;}

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