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

タイトル+本文2段構成のアラート

見出しと補足文を分けた静止アラート。お知らせの要点と詳細を同時に伝えたい場面に使える。

staticcss

プレビュー

ソースコード

HTML

<div class="alert09-07-05">
          <h4 class="t09-07-05">アップデートのお知らせ</h4>
          <p class="b09-07-05">新機能が追加されました。詳細は下記のリリースノートをご確認ください。</p>
        </div>

CSS

.d09-07-05 .alert09-07-05{
          width:100%;
          max-width:280px;
          padding:14px 16px;
          background:#eff6ff;
          border-left:4px solid #2563eb;
          border-radius:6px;
          font-family:sans-serif;
        }
        .d09-07-05 .t09-07-05{
          margin:0 0 6px;
          font-size:14px;
          color:#1e3a8a;
        }
        .d09-07-05 .b09-07-05{
          margin:0;
          font-size:12.5px;
          line-height:1.6;
          color:#1e40af;
        }

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