パーツ番号 01-12-01 ・ CSSのみ

名刺風カードデザイン

会社名・氏名・連絡先を配した名刺サイズの構成。スタッフ紹介ページやプロフィールカードの表現に利用できます。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="logo">M</div>
          <p class="company">Midori Design Studio</p>
          <p class="name">山田 太郎</p>
          <p class="role">Creative Director</p>
          <div class="line"></div>
          <p class="contact">03-1234-5678</p>
          <p class="contact">taro@midori-design.jp</p>
        </div>

CSS

.d01-12-01{ background:#faf8f3; }
        .d01-12-01 .card{ width:100%; max-width:260px; padding:22px 24px; background:#fff; border:1px solid #ddd6c5; box-shadow:0 2px 6px rgba(0,0,0,.06); }
        .d01-12-01 .logo{ width:32px; height:32px; border-radius:50%; background:#3c5a45; color:#fff; font-family:Georgia,serif; font-size:16px; display:flex; align-items:center; justify-content:center; margin-bottom:12px; }
        .d01-12-01 .company{ font-size:11px; letter-spacing:.08em; color:#8a7f5f; margin:0 0 10px; text-transform:uppercase; }
        .d01-12-01 .name{ font-size:18px; font-weight:700; color:#2b2b2b; margin:0 0 2px; }
        .d01-12-01 .role{ font-size:11px; color:#777; margin:0 0 12px; }
        .d01-12-01 .line{ height:1px; background:#e3ddc9; margin:0 0 12px; }
        .d01-12-01 .contact{ font-size:11px; color:#555; margin:0 0 3px; letter-spacing:.02em; }

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