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

枠線のみのアウトラインアラート

背景を敷かず枠線だけで状態を示す静止アラート。控えめに注意を促したい場面での表示に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="alert09-07-03">
          <strong class="lbl09-07-03">注意</strong>
          <span>ご利用中のプランは有効期限が近づいています。</span>
        </div>

CSS

.d09-07-03 .alert09-07-03{
          width:100%;
          max-width:280px;
          padding:12px 14px;
          border:2px solid #d97706;
          border-radius:8px;
          background:#fff;
          font-family:sans-serif;
          font-size:13px;
          line-height:1.6;
          color:#92400e;
        }
        .d09-07-03 .lbl09-07-03{
          display:inline-block;
          margin-right:6px;
          padding:1px 8px;
          border:1px solid #d97706;
          border-radius:4px;
          font-size:11px;
        }

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