パーツ番号 06-06-02 ・ CSSのみ

横型プロフィールカード

アバターとテキストを横並びに配置した形式。スタッフ紹介一覧やサイドバーのプロフィール欄に適します。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="avatar">鈴</div>
          <div class="text">
            <h4 class="name">鈴木 陽子</h4>
            <p class="role">マーケティング部 部長</p>
            <p class="desc">広報・広告運用を統括</p>
          </div>
        </div>

CSS

.d06-06-02 .card{display:flex;align-items:center;gap:14px;width:100%;max-width:260px;}
        .d06-06-02 .avatar{flex-shrink:0;width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#0ea5e9,#22d3ee);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;font-family:sans-serif;}
        .d06-06-02 .text{text-align:left;}
        .d06-06-02 .name{margin:0;font-size:14px;font-weight:700;color:#0f172a;font-family:sans-serif;}
        .d06-06-02 .role{margin:2px 0 0;font-size:11px;color:#0ea5e9;font-family:sans-serif;}
        .d06-06-02 .desc{margin:4px 0 0;font-size:11px;color:#94a3b8;font-family:sans-serif;}

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