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

ミニマル横長商品リストカード

正方形の画像と情報を横並びにしたリスト形式のカードです。検索結果や比較一覧など縦に並べる表示に適します。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="thumb"></div>
          <div class="info">
            <p class="name">キャンバストートバッグ</p>
            <p class="desc">帆布素材・A4対応</p>
            <p class="price">¥2,980</p>
          </div>
        </div>

CSS

.d10-08-09 .card{display:flex;width:260px;background:#fff;border:1px solid #eee;border-radius:8px;overflow:hidden;box-shadow:0 2px 6px rgba(0,0,0,.06);}
        .d10-08-09 .thumb{width:80px;height:80px;flex-shrink:0;background:linear-gradient(135deg,#e8c468,#d9a441);}
        .d10-08-09 .info{padding:10px 14px;display:flex;flex-direction:column;justify-content:center;}
        .d10-08-09 .name{font-size:13px;color:#333;margin:0 0 4px;}
        .d10-08-09 .desc{font-size:11px;color:#999;margin:0 0 6px;}
        .d10-08-09 .price{margin:0;font-size:14px;font-weight:700;color:#333;}

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