This Documentation is Moved!

This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/

Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_uc.css, line 10455

7.1.1.2 Background Colors Alpha

Background colors of white and black can be shifted by appending a modifier bg_{{color-name}}-{{0 to 9}} to shift its transparency

Example s

Default styling

[modifier class]-0
[modifier class]-1
[modifier class]-2
[modifier class]-3
[modifier class]-4
[modifier class]-5
[modifier class]-6
[modifier class]-7
[modifier class]-8
[modifier class]-9
[modifier class]

black

background color of black modified with alphas

black-0
black-1
black-2
black-3
black-4
black-5
black-6
black-7
black-8
black-9
black

white

background color of white modified with alphas

white-0
white-1
white-2
white-3
white-4
white-5
white-6
white-7
white-8
white-9
white
<div class="bg_[modifier class]-0 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-0</div>
<div class="bg_[modifier class]-1 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-1</div>
<div class="bg_[modifier class]-2 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-2</div>
<div class="bg_[modifier class]-3 flex_auto text_center c_white  p_2 p-y_5">[modifier class]-3</div>
<div class="bg_[modifier class]-4 flex_auto text_center c_white p_2 p-y_5">[modifier class]-4</div>
<div class="bg_[modifier class]-5 flex_auto text_center c_white p_2 p-y_5">[modifier class]-5</div>
<div class="bg_[modifier class]-6 flex_auto text_center c_white p_2 p-y_5">[modifier class]-6</div>
<div class="bg_[modifier class]-7 flex_auto text_center c_white p_2 p-y_5">[modifier class]-7</div>
<div class="bg_[modifier class]-8 flex_auto text_center c_white p_2 p-y_5">[modifier class]-8</div>
<div class="bg_[modifier class]-9 flex_auto text_center c_white p_2 p-y_5">[modifier class]-9</div>
<div class="bg_[modifier class] flex_auto text_center c_white p_2 p-y_5">[modifier class]</div>
Copy Code