ユーティリティ

回り込み

右寄せ
.acms-float-right
左寄せ
.acms-float-left
回り込み解除
.acms-clear

アクセシビリティ

視覚的に表示はされないが、音声で出力する
.acms-hide-visually

幅と高さ

幅 100%
.acms-width-max
高さ 100%
.acms-height-max
幅と高さ 100%
.acms-width-height-max

幅(スマートフォン用)

幅 100%
.acms-width-sp
幅 オート
.acms-width-auto-sp

テキスト

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

<p class="acms-text-left">こちらはテストの本文です。</p>
<p class="acms-text-right">こちらはテストの本文です。</p>
<p class="acms-text-center">こちらはテストの本文です。</p>
<p class="acms-text-nowrap">こちらはテストの本文です。</p>

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

こちらはテストの本文です。

<p class="acms-text-primary">こちらはテストの本文です。</p>
<p class="acms-text-info">こちらはテストの本文です。</p>
<p class="acms-text-success">こちらはテストの本文です。</p>
<p class="acms-text-warning">こちらはテストの本文です。</p>
<p class="acms-text-danger">こちらはテストの本文です。</p>

アイコン用背景

<span class="acms-icon-bg">...</span>
<span class="acms-icon-bg acms-icon-bg-info">...</span>
<span class="acms-icon-bg acms-icon-bg-success">...</span>
<span class="acms-icon-bg acms-icon-bg-warning">...</span>
<span class="acms-icon-bg acms-icon-bg-danger">...</span>

角丸

角丸
.acms-round
.acms-circle
<span class="acms-icon-bg acms-round">...</span>
<span class="acms-icon-bg acms-circle">...</span>

画像のレスポンシブ対応

<img src="/themes/system/admin/styleguide/images/sampleImage.jpg" alt="" class="acms-img-responsive">