echo-alert
アイコンを含む、システム側の注意文を表示する。
p要素、もしくはdiv要素でのマークアップを想定している。
(breakpoint) が lg
以上で左右余白が大きくなる。
(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>