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

引用符装飾ボックス

大きな引用符のグラフィックを添えた囲みボックスです。お客様の声や著名な一言を掲載するセクションに使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d07-05-09-box">
          <span class="d07-05-09-mark">&ldquo;</span>
          <p class="d07-05-09-body">静かな余白がデザインを引き立てる。</p>
        </div>

CSS

.d07-05-09-box{ position:relative; max-width:280px; padding:28px 20px 20px; background:#f7f7f5; border-left:3px solid #444; }
        .d07-05-09-mark{ position:absolute; top:-6px; left:12px; font-size:2.6rem; line-height:1; color:#ccc; font-family:Georgia, serif; }
        .d07-05-09-body{ margin:0; font-size:.9rem; color:#444; line-height:1.7; }

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