パーツ番号 02-04-12 ・ CSSのみ

アバター付きカード型引用

丸いアバターアイコンと発言を横並びに配置したカード型の引用。お客様の声や推薦コメントの掲載に適しています。

staticcss

プレビュー

ソースコード

HTML

<blockquote class="d02-04-12-quote">
          <span class="d02-04-12-avatar"></span>
          <div class="d02-04-12-body">
            <p class="d02-04-12-text">小さな改善の積み重ねが、大きな信頼につながると実感しています。</p>
            <span class="d02-04-12-name">高橋 健一 <span class="d02-04-12-role">／ プロダクトマネージャー</span></span>
          </div>
        </blockquote>

CSS

.d02-04-12-quote{
          margin:0;
          display:flex;
          gap:12px;
          align-items:flex-start;
          padding:16px;
          background:#fff;
          border:1px solid #e6e8ef;
          border-radius:10px;
          box-shadow:0 2px 8px rgba(0,0,0,.05);
        }
        .d02-04-12-avatar{
          flex:none;
          width:38px;
          height:38px;
          border-radius:50%;
          background:linear-gradient(135deg,#7c9cf0,#4a6cf7);
        }
        .d02-04-12-body{display:flex;flex-direction:column;gap:8px;}
        .d02-04-12-text{margin:0;font-size:13px;line-height:1.7;color:#333;}
        .d02-04-12-name{font-size:12px;font-weight:700;color:#4a6cf7;}
        .d02-04-12-role{font-weight:400;color:#888;}

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