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

引用符付きレビューカード(静止)

大きな引用符と星評価、氏名を組み合わせた定番のレビューカードです。導入事例やお客様の声のセクションに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-05-01-card">
          <div class="d06-05-01-quote">&ldquo;</div>
          <p class="d06-05-01-text">対応がとても丁寧で、納品まで安心してお任せできました。仕上がりにも大満足です。</p>
          <div class="d06-05-01-stars">★★★★★</div>
          <div class="d06-05-01-name">佐藤 美咲 様</div>
        </div>

CSS

.d06-05-01-card{ width:100%; max-width:260px; text-align:center; }
        .d06-05-01-quote{ font-size:48px; line-height:1; color:#c7b9ff; font-family:Georgia, serif; margin-bottom:4px; }
        .d06-05-01-text{ font-size:13px; line-height:1.7; color:#3a3550; margin:0 0 12px; }
        .d06-05-01-stars{ color:#f5a623; font-size:15px; letter-spacing:2px; margin-bottom:8px; }
        .d06-05-01-name{ font-size:12px; font-weight:700; color:#6b5fc9; }

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