パーツ番号 06-05-09 ・ CSSのみ

コンパクトミニレビューカード(小型)

情報を氏名・星評価・一言コメントに絞った小型のレビューカードです。複数を並べて一覧性を高めたい場合に便利です。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-05-09-card">
          <span class="d06-05-09-avatar">石</span>
          <div class="d06-05-09-body">
            <div class="d06-05-09-top"><span class="d06-05-09-name">石川 智</span><span class="d06-05-09-stars">★★★★★</span></div>
            <p class="d06-05-09-text">対応が早くて助かりました。</p>
          </div>
        </div>

CSS

.d06-05-09-card{ display:flex; align-items:center; gap:10px; background:#f7f8fc; border-radius:10px; padding:10px 14px; width:100%; max-width:230px; }
        .d06-05-09-avatar{ width:30px; height:30px; flex-shrink:0; border-radius:50%; background:linear-gradient(135deg,#ffb86b,#ff7e5f); color:#fff; font-size:12px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d06-05-09-top{ display:flex; justify-content:space-between; align-items:center; gap:6px; }
        .d06-05-09-name{ font-size:11px; font-weight:700; color:#221f33; }
        .d06-05-09-stars{ color:#f5a623; font-size:10px; letter-spacing:1px; }
        .d06-05-09-text{ margin:2px 0 0; font-size:10px; color:#5c5977; }

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