デフォルト
.%{STYLEGUIDE_PAGE}-alert-success
.%{STYLEGUIDE_PAGE}-alert-info
.%{STYLEGUIDE_PAGE}-alert-danger
.%{STYLEGUIDE_PAGE}-alert-warning
<p class="%{STYLEGUIDE_PAGE}-alert">
<button class="js-acms-alert-close">×</button>
デフォルト
</p>
<p class="%{STYLEGUIDE_PAGE}-alert %{STYLEGUIDE_PAGE}-alert-success">
<button class="js-acms-alert-close %{STYLEGUIDE_PAGE}-margin-right-mini">×</button>
.%{STYLEGUIDE_PAGE}-alert-success
</p>
<p class="%{STYLEGUIDE_PAGE}-alert %{STYLEGUIDE_PAGE}-alert-info">
<button class="js-acms-alert-close %{STYLEGUIDE_PAGE}-margin-right-mini">×</button>
.%{STYLEGUIDE_PAGE}-alert-info
</p>
<p class="%{STYLEGUIDE_PAGE}-alert %{STYLEGUIDE_PAGE}-alert-danger">
<button class="js-acms-alert-close %{STYLEGUIDE_PAGE}-margin-right-mini">×</button>
.%{STYLEGUIDE_PAGE}-alert-danger
</p>
<p class="%{STYLEGUIDE_PAGE}-alert %{STYLEGUIDE_PAGE}-alert-warning">
<button class="js-acms-alert-close %{STYLEGUIDE_PAGE}-margin-right-mini">×</button>
.%{STYLEGUIDE_PAGE}-alert-warning
</p>
<p class="%{STYLEGUIDE_PAGE}-alert %{STYLEGUIDE_PAGE}-alert-icon"><span class="%{STYLEGUIDE_PAGE}-alert-icon-before %{STYLEGUIDE_PAGE}-icon-news"></span>
<button class="js-acms-alert-close %{STYLEGUIDE_PAGE}-alert-icon-after %{STYLEGUIDE_PAGE}-margin-right-mini">×</button>
デフォルト
</p>
<p class="%{STYLEGUIDE_PAGE}-alert %{STYLEGUIDE_PAGE}-alert-icon %{STYLEGUIDE_PAGE}-alert-success"><span class="%{STYLEGUIDE_PAGE}-alert-icon-before %{STYLEGUIDE_PAGE}-icon-news"></span>
<button class="js-acms-alert-close %{STYLEGUIDE_PAGE}-alert-icon-after %{STYLEGUIDE_PAGE}-margin-right-mini">×</button>
.%{STYLEGUIDE_PAGE}-alert-success
</p>
<p class="%{STYLEGUIDE_PAGE}-alert %{STYLEGUIDE_PAGE}-alert-icon %{STYLEGUIDE_PAGE}-alert-info"><span class="%{STYLEGUIDE_PAGE}-alert-icon-before %{STYLEGUIDE_PAGE}-icon-news"></span>
<button class="js-acms-alert-close %{STYLEGUIDE_PAGE}-alert-icon-after %{STYLEGUIDE_PAGE}-margin-right-mini">×</button>
.%{STYLEGUIDE_PAGE}-alert-info
</p>
<p class="%{STYLEGUIDE_PAGE}-alert %{STYLEGUIDE_PAGE}-alert-icon %{STYLEGUIDE_PAGE}-alert-danger"><span class="%{STYLEGUIDE_PAGE}-alert-icon-before %{STYLEGUIDE_PAGE}-icon-attention"></span>
<button class="js-acms-alert-close %{STYLEGUIDE_PAGE}-alert-icon-after %{STYLEGUIDE_PAGE}-margin-right-mini">×</button>
.%{STYLEGUIDE_PAGE}-alert-danger
</p>
<p class="%{STYLEGUIDE_PAGE}-alert %{STYLEGUIDE_PAGE}-alert-icon %{STYLEGUIDE_PAGE}-alert-warning"><span class="%{STYLEGUIDE_PAGE}-alert-icon-before %{STYLEGUIDE_PAGE}-icon-attention"></span>
<button class="js-acms-alert-close %{STYLEGUIDE_PAGE}-alert-icon-after %{STYLEGUIDE_PAGE}-margin-right-mini">×</button>
.%{STYLEGUIDE_PAGE}-alert-warning
</p>