Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

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

4.1.1.3 Hover: Background Color

hovers can easily be added to objects by adding h: in front of the background color utility like h:bg_primary

Example s

bg_alert

background color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_primary

background color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_shade

background color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_info

background color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_highlight

background color success color

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_success

background color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_warning

background color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5
<div class="flex m_5">
  <div class="h:[modifier class]-5 flex_auto text_center br_1 br_solid br_shade-4 p_2">5</div>
  <div class="h:[modifier class]-4 flex_auto text_center br_1 br_solid br_shade-4 p_2">4</div>
  <div class="h:[modifier class]-3 flex_auto text_center br_1 br_solid br_shade-4 p_2">3</div>
  <div class="h:[modifier class]-2 flex_auto text_center br_1 br_solid br_shade-4 p_2">2</div>
  <div class="h:[modifier class]-1 flex_auto text_center br_1 br_solid br_shade-4 p_2">1</div>
  <div class="h:[modifier class]-0 flex_auto text_center br_1 br_solid br_shade-4 p_2">0</div>
  <div class="h:[modifier class]-n1 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n1</div>
  <div class="h:[modifier class]-n2 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n2</div>
  <div class="h:[modifier class]-n3 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n3</div>
  <div class="h:[modifier class]-n4 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n4</div>
  <div class="h:[modifier class]-n5 flex_auto text_center br_1 br_solid br_shade-4 p_2 h:c_white">n5</div>
</div>
Copy Code