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

監修者バッジ付きクレジット

「監修」バッジを添えて信頼性を明示する表記。医療・法律・金融など専門性を要する記事に有効です。

staticcss

プレビュー

ソースコード

HTML

<div class="card">
          <div class="av">監</div>
          <div class="tx">
            <span class="badge">監修</span>
            <p class="nm">医療法人 桜井クリニック 桜井 誠</p>
          </div>
        </div>

CSS

.d06-13-05 .card{display:flex;align-items:center;gap:12px;width:100%;max-width:300px;padding:14px 16px;border-radius:10px;background:#f0fdf4;border:1px solid #bbf7d0;}
        .d06-13-05 .av{flex-shrink:0;width:40px;height:40px;border-radius:50%;background:#16a34a;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;font-family:sans-serif;}
        .d06-13-05 .tx{text-align:left;}
        .d06-13-05 .badge{display:inline-block;padding:2px 9px;border-radius:999px;background:#16a34a;color:#fff;font-size:10px;font-weight:700;font-family:sans-serif;}
        .d06-13-05 .nm{margin:5px 0 0;font-size:12px;font-weight:700;color:#14532d;font-family:sans-serif;}

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