c-alert

システム側の注意文を表示する。アイコンを併用することを想定している。
p のみ、もしくは div と p, ul でマークアップすることができる。
連続して表示すると .c-alert 間の余白が通常よりも狭くなる。
下以外の余白は utility > .u-margin 等で指定する。

c-alert:これはシステムからの注意文です。

お知らせc-alert:これはシステムからの注意文です。

c-alert:これはシステムからの注意文です。

閉じる

お知らせc-alert:これはシステムからの注意文です。閉じる

<div>
<p class="c-alert">c-alert:これはシステムからの注意文です。</p>
</div>

<div>
<p class="c-alert"><span class="c-alert-header"><i class="fas fa-info-circle"></i><span class="u-sr">お知らせ</span></span>c-alert:これはシステムからの注意文です。</p>
</div>

<div>
<div class="c-alert"><p>c-alert:これはシステムからの注意文です。</p><span class="c-alert-footer"><i class="fas fa-times-circle"></i><span class="u-sr">閉じる</span></span></div>
</div>

<div>
<p class="c-alert"><span class="c-alert-header"><i class="fas fa-info-circle"></i><span class="u-sr">お知らせ</span></span>c-alert:これはシステムからの注意文です。<span class="c-alert-footer"><i class="fas fa-times-circle"></i><span class="u-sr">閉じる</span></span></p>
</div>

c-alert-(color)

注意文の色を変更する。
(color)は標準のカラーテーブルを参照。

c-alert:これはシステムからの注意文です。

<p class="c-alert c-alert-first">c-alert:これはシステムからの注意文です。</p>
<p class="c-alert c-alert-second">c-alert:これはシステムからの注意文です。</p>
<p class="c-alert c-alert-third">c-alert:これはシステムからの注意文です。</p>
<p class="c-alert c-alert-fourth">c-alert:これはシステムからの注意文です。</p>
<p class="c-alert c-alert-info">c-alert:これはシステムからの注意文です。</p>
<p class="c-alert c-alert-important">c-alert:これはシステムからの注意文です。</p>

component-alert

c-alert

c-alert-(color)

Style guide