パーツ番号 06-12-12 ・ CSSのみ
購入済みバッジ付きレビュー一覧
実際の購入者であることを示すバッジを添えたレビュー一覧の静止デザインです。ECサイトのレビュー欄で信頼性を高めたい場合の見た目見本として使えます。
プレビュー
ソースコード
HTML
<div class="d06-12-12-wrap">
<div class="d06-12-12-item">
<div class="d06-12-12-top"><span class="d06-12-12-name">石田 幸子</span><span class="d06-12-12-verified">✓ 購入済み</span></div>
<p class="d06-12-12-text">梱包も丁寧で、届いた商品も期待通りでした。</p>
</div>
<div class="d06-12-12-item">
<div class="d06-12-12-top"><span class="d06-12-12-name">湯浅 拓</span></div>
<p class="d06-12-12-text">サイトのデザイン見本を参考にさせていただきました。</p>
</div>
<div class="d06-12-12-item">
<div class="d06-12-12-top"><span class="d06-12-12-name">村上 玲</span><span class="d06-12-12-verified">✓ 購入済み</span></div>
<p class="d06-12-12-text">リピート購入です。安定した品質で安心できます。</p>
</div>
</div>CSS
.d06-12-12-wrap{ list-style:none; margin:0; padding:0; width:100%; display:flex; flex-direction:column; gap:11px; }
.d06-12-12-item{ padding-bottom:11px; border-bottom:1px solid #eceef4; }
.d06-12-12-item:last-child{ border-bottom:none; padding-bottom:0; }
.d06-12-12-top{ display:flex; align-items:center; gap:6px; }
.d06-12-12-name{ font-size:11px; font-weight:700; color:#221f33; }
.d06-12-12-verified{ font-size:9px; font-weight:700; color:#38b28c; background:#e6f7f1; border-radius:4px; padding:1px 6px; }
.d06-12-12-text{ margin:4px 0 0; font-size:10.5px; line-height:1.6; color:#5c5977; }クラス名 .d06-12-12 は本ライブラリ内での識別用です。複数のパーツを同じページで使う場合は、重複しないよう名前を変更してください。