パーツ番号 09-09-09 ・ CSSのみ

公開ステータスバッジ

WordPress風の投稿ステータス表示です。記事一覧の公開状態カラムやCMS管理画面に使えます。

staticcss

プレビュー

ソースコード

HTML

<div class="d09-09-09-wrap">
          <span class="d09-09-09-badge d09-09-09-draft"><i class="d09-09-09-dot"></i>下書き</span>
          <span class="d09-09-09-badge d09-09-09-review"><i class="d09-09-09-dot"></i>レビュー中</span>
          <span class="d09-09-09-badge d09-09-09-publish"><i class="d09-09-09-dot"></i>公開済み</span>
        </div>

CSS

.d09-09-09-wrap{display:flex;flex-direction:column;gap:10px;font-family:sans-serif}
        .d09-09-09-badge{display:inline-flex;align-items:center;gap:7px;padding:5px 12px;border-radius:3px;font-size:12px;background:#f6f7f7;border:1px solid #dcdcde;color:#3c434a}
        .d09-09-09-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
        .d09-09-09-draft .d09-09-09-dot{background:#a7aaad}
        .d09-09-09-review .d09-09-09-dot{background:#dba617}
        .d09-09-09-publish .d09-09-09-dot{background:#00a32a}
        .d09-09-09-publish{color:#00a32a;border-color:#b8e6c1;background:#f0faf1}

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