← 静的パーツギャラリーへ戻る

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

審査・進行状況ステップ付きアラート

現在の進行段階を数字バッジで示す静止アラート。会員登録や本人確認フローの途中経過を伝える場面に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="alert09-07-11">
          <span class="step09-07-11">2/3</span>
          <div class="body09-07-11">
            <p class="t09-07-11">本人確認書類の確認中です</p>
            <p class="s09-07-11">審査完了まで通常1〜2営業日かかります</p>
          </div>
        </div>

CSS

.d09-07-11 .alert09-07-11{
          display:flex;
          align-items:flex-start;
          gap:12px;
          width:100%;
          max-width:280px;
          padding:14px 16px;
          background:#f0f9ff;
          border:1px solid #bae6fd;
          border-radius:10px;
          font-family:sans-serif;
        }
        .d09-07-11 .step09-07-11{
          flex-shrink:0;
          padding:3px 9px;
          border-radius:999px;
          background:#0284c7;
          color:#fff;
          font-size:11px;
          font-weight:700;
        }
        .d09-07-11 .t09-07-11{
          margin:0 0 4px;
          font-size:13px;
          font-weight:600;
          color:#075985;
        }
        .d09-07-11 .s09-07-11{
          margin:0;
          font-size:11.5px;
          line-height:1.5;
          color:#0369a1;
        }

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