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

左アイコン付きアラートボックス

左側の丸アイコンと右側のメッセージで構成した静止アラート。決済完了やフォーム送信後の結果表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="alert09-07-02">
          <span class="ic09-07-02">
            <svg viewBox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4"><circle cx="12" cy="12" r="9"></circle><path d="M8 12.5l2.6 2.6L16 9.5"></path></svg>
          </span>
          <p class="msg09-07-02">お支払いが完了しました。確認メールをお送りしています。</p>
        </div>

CSS

.d09-07-02 .alert09-07-02{
          display:flex;
          align-items:center;
          gap:12px;
          width:100%;
          max-width:280px;
          padding:14px 16px;
          background:#ecfdf5;
          border:1px solid #a7f3d0;
          border-radius:10px;
          font-family:sans-serif;
        }
        .d09-07-02 .ic09-07-02{
          width:32px;
          height:32px;
          flex-shrink:0;
          border-radius:50%;
          background:#10b981;
          display:flex;
          align-items:center;
          justify-content:center;
        }
        .d09-07-02 .ic09-07-02 svg{
          width:18px;
          height:18px;
        }
        .d09-07-02 .msg09-07-02{
          margin:0;
          font-size:13px;
          line-height:1.5;
          color:#065f46;
        }

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