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

経歴サマリー付きプロフィールカード

短い経歴紹介文を添えた形式。採用ページのメンバー紹介や社員インタビュー導入部に適します。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="avatar">小</div>
          <div class="text">
            <h4 class="name">小林 美咲</h4>
            <p class="role">エンジニア</p>
            <p class="bio">通信業界にて8年間システム開発に従事。現在はバックエンド設計を担当。</p>
          </div>
        </div>

CSS

.d06-06-06 .card{display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;max-width:220px;}
        .d06-06-06 .avatar{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#ec4899,#f472b6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;font-family:sans-serif;}
        .d06-06-06 .name{margin:0;font-size:14px;font-weight:700;color:#1e293b;font-family:sans-serif;}
        .d06-06-06 .role{margin:0;font-size:11px;color:#ec4899;font-family:sans-serif;}
        .d06-06-06 .bio{margin:4px 0 0;font-size:10.5px;line-height:1.6;color:#64748b;font-family:sans-serif;}

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