アラート

デフォルト

.%{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>

アイコンつき

デフォルト

.%{STYLEGUIDE_PAGE}-alert-success

.%{STYLEGUIDE_PAGE}-alert-info

.%{STYLEGUIDE_PAGE}-alert-danger

.%{STYLEGUIDE_PAGE}-alert-warning

<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>