# アラート

デフォルト

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