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

執筆数・フォロワー数付き著者カード

執筆記事数とフォロワー数を数字で添えた著者カードです。実績を数値で示したいメディアサイトの著者紹介欄に向きます。

staticcss

プレビュー

ソースコード

HTML

<div class="stat">
          <div class="av">南</div>
          <div class="tx">
            <p class="nm">南 千夏</p>
            <p class="rl">ライター</p>
          </div>
          <div class="nums">
            <div class="num-item"><span class="num-v">128</span><span class="num-l">記事</span></div>
            <div class="num-item"><span class="num-v">3.2k</span><span class="num-l">フォロワー</span></div>
          </div>
        </div>

CSS

.d06-13-12 .stat{display:flex;align-items:center;gap:14px;width:100%;max-width:300px;padding:14px 16px;border-radius:10px;border:1px solid #eef0f3;}
        .d06-13-12 .av{flex-shrink:0;width:42px;height:42px;border-radius:50%;background:linear-gradient(135deg,#f43f5e,#fb923c);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:700;font-family:sans-serif;}
        .d06-13-12 .tx{text-align:left;}
        .d06-13-12 .nm{margin:0;font-size:12.5px;font-weight:700;color:#1e293b;font-family:sans-serif;}
        .d06-13-12 .rl{margin:2px 0 0;font-size:10.5px;color:#f43f5e;font-family:sans-serif;}
        .d06-13-12 .nums{display:flex;gap:12px;margin-left:auto;flex-shrink:0;}
        .d06-13-12 .num-item{display:flex;flex-direction:column;align-items:center;gap:1px;}
        .d06-13-12 .num-v{font-size:13px;font-weight:700;color:#1e293b;font-family:sans-serif;}
        .d06-13-12 .num-l{font-size:9px;color:#94a3b8;font-family:sans-serif;}

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