component-alert

echo-alert

アイコンを含む、システム側の注意文を表示する。
p要素、もしくはdiv要素でのマークアップを想定している。

(breakpoint) が lg 以上で左右余白が大きくなる。

文字サイズの変化 group: article
(breakpoint)(fontsize)
.echo-***-sm.echo-***.echo-***-lg
md以下 xs sm md
lg以上 sm md lg

この表の解説

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


お知らせ左にFont Awesomeのアイコンを表示しています。


右にFont Awesomeのアイコンを表示しています。閉じる


お知らせ左右にFont Awesomeのアイコンを表示しています。閉じる

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

<hr class="echo-margin-y-md">

<p class="echo-alert"><span class="echo-alert-header"><i class="fas fa-info-circle"></i><span class="echo-sr">お知らせ</span></span>左にFont Awesomeのアイコンを表示しています。</p>

<hr class="echo-margin-y-md">

<p class="echo-alert">右にFont Awesomeのアイコンを表示しています。<span class="echo-alert-footer"><i class="fas fa-times-circle"></i><span class="echo-sr">閉じる</span></span></p>

<hr class="echo-margin-y-md">

<p class="echo-alert"><span class="echo-alert-header"><i class="fas fa-info-circle"></i><span class="echo-sr">お知らせ</span></span>左右にFont Awesomeのアイコンを表示しています。<span class="echo-alert-footer"><i class="fas fa-times-circle"></i><span class="echo-sr">閉じる</span></span></p>

sub class echo-alert-(color)

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

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


お知らせ左右にFont Awesomeのアイコンを表示しています。閉じる


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


お知らせ左右にFont Awesomeのアイコンを表示しています。閉じる

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

<hr class="echo-margin-y-md">

<p class="echo-alert echo-alert-info"><span class="echo-alert-header"><i class="fas fa-info-circle"></i><span class="echo-sr">お知らせ</span></span>左右にFont Awesomeのアイコンを表示しています。<span class="echo-alert-footer"><i class="fas fa-times-circle"></i><span class="echo-sr">閉じる</span></span></p>

<hr class="echo-margin-y-md">

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

<hr class="echo-margin-y-md">

<p class="echo-alert echo-alert-important"><span class="echo-alert-header"><i class="fas fa-info-circle"></i><span class="echo-sr">お知らせ</span></span>左右にFont Awesomeのアイコンを表示しています。<span class="echo-alert-footer"><i class="fas fa-times-circle"></i><span class="echo-sr">閉じる</span></span></p>