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

LinkedIn風ビジネス投稿カード

役職・所属を添えたヘッダーとリアクション数を備えたLinkedIn風の静止カードです。採用ページや会社ニュースの引用イメージ見本として利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="d06-15-06-card">
          <div class="d06-15-06-head">
            <span class="d06-15-06-avatar"></span>
            <div>
              <div class="d06-15-06-name">佐々木 亮 &#183; 2親等</div>
              <div class="d06-15-06-role">株式会社ノート / 事業開発マネージャー</div>
              <div class="d06-15-06-time">1日前</div>
            </div>
          </div>
          <p class="d06-15-06-text">新規事業のプレスリリースを公開しました。チーム一丸で取り組んだ成果です。</p>
          <div class="d06-15-06-stats"><span>&#128077; 96件の反応</span><span>コメント8件</span></div>
        </div>

CSS

.d06-15-06-card{ width:100%; max-width:250px; background:#fff; border:1px solid #e0dfdc; border-radius:8px; padding:12px; text-align:left; }
        .d06-15-06-head{ display:flex; gap:8px; margin-bottom:8px; }
        .d06-15-06-avatar{ width:34px; height:34px; border-radius:6px; background:linear-gradient(135deg,#0a66c2,#4a90d9); flex-shrink:0; }
        .d06-15-06-name{ font-size:11.5px; font-weight:700; color:#000000e0; }
        .d06-15-06-role{ font-size:9.5px; color:#00000099; line-height:1.3; margin-top:1px; }
        .d06-15-06-time{ font-size:9px; color:#00000099; margin-top:1px; }
        .d06-15-06-text{ font-size:11px; line-height:1.5; color:#000000e0; margin:0 0 8px; }
        .d06-15-06-stats{ display:flex; justify-content:space-between; font-size:9.5px; color:#00000099; border-top:1px solid #eee; padding-top:6px; }

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