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

枠線のみのミニマルプロフィールカード

塗りや影を持たず罫線のみで区切ったシンプルな形式。落ち着いた印象のコーポレートサイトに合います。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="avatar">岡</div>
          <h4 class="name">岡田 亮</h4>
          <p class="role">総務担当</p>
        </div>

CSS

.d06-06-08 .card{width:100%;max-width:200px;padding:20px 14px;border:1px solid #cbd5e1;border-radius:8px;display:flex;flex-direction:column;align-items:center;text-align:center;gap:8px;}
        .d06-06-08 .avatar{width:52px;height:52px;border-radius:50%;border:2px solid #94a3b8;color:#475569;display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:700;font-family:sans-serif;}
        .d06-06-08 .name{margin:0;font-size:13px;font-weight:700;color:#334155;font-family:sans-serif;}
        .d06-06-08 .role{margin:0;font-size:10.5px;color:#94a3b8;font-family:sans-serif;}

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