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

著者プロフィール展開前のコンパクト表示

詳細プロフィールを折りたたんだ状態の静止表示。クリックで開く想定のUIをデザイン見本として提示します。

staticcss

プレビュー

ソースコード

HTML

<div class="collapsed">
          <div class="row">
            <span class="av">藤</span>
            <span class="nm">藤井 智也</span>
            <span class="chev">▾</span>
          </div>
          <p class="hint">プロフィールを表示</p>
        </div>

CSS

.d06-13-10 .collapsed{width:100%;max-width:240px;padding:12px 14px;border-radius:10px;border:1px solid #eef0f3;}
        .d06-13-10 .row{display:flex;align-items:center;gap:8px;}
        .d06-13-10 .av{width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,#6366f1,#818cf8);color:#fff;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;font-family:sans-serif;flex-shrink:0;}
        .d06-13-10 .nm{flex:1;text-align:left;font-size:12px;font-weight:700;color:#1e293b;font-family:sans-serif;}
        .d06-13-10 .chev{font-size:11px;color:#94a3b8;}
        .d06-13-10 .hint{margin:6px 0 0;font-size:10px;color:#94a3b8;font-family:sans-serif;text-align:left;}

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