LPで使う推薦文(テスティモニアル)カード。blockquoteの正しいマークアップに、大きな引用符の装飾とアバター付き署名を組み合わせます。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
引用は figure > blockquote + figcaption が意味的に正しい組み合わせで、「誰の発言か」が構造として伝わります。飾りの引用符は ::before の content で置き、色を枠線と同じ淡色にして本文の邪魔をしない「背景装飾」に留めます。blockquote に position: relative を与えて引用符より手前に重ねています。
複数並べる場合はレスポンシブカードグリッドのレシピと組み合わせると、枚数が変わっても崩れません。
お客様の声カードを作ってください。figure > blockquote + figcaptionでマークアップし、::beforeの大きな引用符装飾、円形アバターと名前・肩書きの署名行を付けてください。