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 9804

7.1.1.1 Background Color Shades

Background colors can be shifted by appending a modifier of n5 through 5. The negative(n) numbers mix the color with black and the positive numbers mix the color with white.

ClassesEffect
.bg_(color)-0, .bg_(color)pure color
.bg_(color)-1color with 15% white mixed in
.bg_(color)-2color with 37% white mixed in
.bg_(color)-3color with 60% white mixed in
.bg_(color)-4color with 78% white mixed in
.bg_(color)-5color with 90% white mixed in
.bg_(color)-n1color with 10% black mixed in
.bg_(color)-n2color with 25% black mixed in
.bg_(color)-n3color with 45% black mixed in
.bg_(color)-n4color with 58% black mixed in
.bg_(color)-n5color with 75% black mixed in

bg_primary - background color modified light to dark bg_secondary - background color modified light to dark bg_shade - background color modified light to dark bg_accent - background color modified light to dark bg_navigation - background color modified light to dark bg_info - background color modified light to dark bg_highlight - background color modified light to dark bg_success - background color modified light to dark bg_warning - background color modified light to dark bg_alert - background color modified light to dark bg_acc - background color modified light to dark

MarkupWrapperClasss: flex bg_shade-5 p_2 texture_light

Example

white
5
4
3
2
1
0
n1
n2
n3
n4
n5
black
<div class="bg_white flex_auto text_center p_2 p-y_5 ">white</div>
<div class="-5 flex_auto text_center  p_2 p-y_5">5</div>
<div class="-4 flex_auto text_center  p_2 p-y_5">4</div>
<div class="-3 flex_auto text_center  p_2 p-y_5">3</div>
<div class="-2 flex_auto text_center  p_2 p-y_5">2</div>
<div class="-1 flex_auto text_center  c_white p_2 p-y_5">1</div>
<div class="-0 flex_auto text_center  c_white p_2 p-y_5">0</div>
<div class="-n1 flex_auto text_center  c_white p_2 p-y_5">n1</div>
<div class="-n2 flex_auto text_center  c_white p_2 p-y_5">n2</div>
<div class="-n3 flex_auto text_center  c_white p_2 p-y_5">n3</div>
<div class="-n4 flex_auto text_center  c_white p_2 p-y_5">n4</div>
<div class="-n5 flex_auto text_center  c_white p_2 p-y_5">n5</div>
<div class="bg_black flex_auto text_center  c_white p_2 p-y_5">black</div>
Copy Code