Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

Interaction

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

4 Interaction

Interactions can be enhanced with toggle icons or loading graphics to show the system is responding to user input. Often this classes are tirggerd by .active

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

4.1 Interaction

Modify how the user gets feed back of changes from hover effects to active states and how things animate or select.

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

4.1 States

Prefixed before class rules the h: for hover or a: for active class allows for some dynamics with very little efforts.

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

4.1.1 Hover

Decorate containers and text to show user interaction with simple hover, and focus effects.

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

4.1.1.1 Hover: Text Color

Hovers can easily be added to change the text color by adding h: in front of the text color utility like h:primary

Example s

c_primary

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_shade

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_info

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_highlight

text color success color

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_success

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_warning

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_alert

text 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 font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">5</div>
  <div class="h:[modifier class]-4 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">4</div>
  <div class="h:[modifier class]-3 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">3</div>
  <div class="h:[modifier class]-2 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">2</div>
  <div class="h:[modifier class]-1 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">1</div>
  <div class="h:[modifier class]-0 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1">0</div>
  <div class="h:[modifier class]-n1 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n1</div>
  <div class="h:[modifier class]-n2 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n2</div>
  <div class="h:[modifier class]-n3 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n3</div>
  <div class="h:[modifier class]-n4 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n4</div>
  <div class="h:[modifier class]-n5 flex_auto font_bold bg_shade-3 font_4 font_accent: text_center br_1 br_solid br_shade-4 p_1 ">n5</div>
</div>
Copy Code

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

4.1.1.2 Hover: Underline

Sometimes is is needed to add an underline on a piece of text when it hovers adding h: in front of the type of underline you would like gives that type of underline to the text when hovered.

Example s

underline.c_primary

classic anchor text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, similique. Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi harum magni adipisicing elit aut nulla et.

dotted.c_warning

great for popups or hint text

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, similique. Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi harum magni adipisicing elit aut nulla et.

double.c_highlight

extra loud underlines for the really important links or modals

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, similique. Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi harum magni adipisicing elit aut nulla et.

dashed.c_accent

extra loud dots for info and hint texts reveals.

Lorem ipsum dolor sit amet, consectetur adipisicing elit. Tenetur, similique. Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi harum magni adipisicing elit aut nulla et. 

<p class="font_1">
  Lorem ipsum dolor sit amet,
  <span class="h:[modifier class] h:c_primary-n3">consectetur</span>
  adipisicing elit.
  <span class="h:[modifier class] h:c_primary-n3">Tenetur, similique</span>.
  Sapiente facilis ipsam unde, dolorem illo ullam, tempore quos maiores quaerat quibusdam voluptatibus laboriosam. Nisi
  <span class="h:[modifier class] h:c_primary-n3">harum magni</span>
      adipisicing elit aut nulla et.
</p>
Copy Code

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

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

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

4.1.1.4 Hover: Border Color

hovers can easily effect the border style to toggle between styles. Very useful fo toggling from a border type to none or vice versa.

Class Effect
br_none Border is None on Hover
br_dotted Border is Dotted on Hover
br_dashed Border is Dashed on Hover
br_solid Border is Solid on Hover
br_transparent Sometimes shifting to transparent is better so as to not cause the UI to flicker and resize

Example

Default styling

None
Transparent
Solid
Dashed
Dotted
<div class="">
<div class="h:br_none br_3 br_solid br_primary-2 p_2 m_2 bg_shade-5">None</div>
<div class="h:br_transparent br_3 br_solid br_primary-2 p_2 m_2 bg_shade-5">Transparent</div>
<div class="h:br_solid br_3 br_dotted br_primary-2 p_2 m_2 bg_shade-5">Solid</div>
<div class="h:br_dashed br_3 br_solid br_primary-2 p_2 m_2 bg_shade-5">Dashed</div>
<div class="h:br_dotted br_3 br_solid br_primary-2 p_2 m_2 bg_shade-5">Dotted</div>
</div>
Copy Code

Example

Default styling

0
1
2
3
4
5
6
7
8
9
<div class="flex m_5 bg_primary m_5">
  <div class="h:opacity opacity-0  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">0</div>
  <div class="h:opacity opacity-1  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">1</div>
  <div class="h:opacity opacity-2  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">2</div>
  <div class="h:opacity opacity-3  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">3</div>
  <div class="h:opacity opacity-4  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">4</div>
  <div class="h:opacity opacity-5  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">5</div>
  <div class="h:opacity opacity-6  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="h:opacity opacity-7  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="h:opacity opacity-8  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="h:opacity opacity-9  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">9</div>
</div>
Copy Code

Example s

bg_white

text color modified light to dark

0
1
2
3
4
5
6
7
8
9
default

bg_black

text color modified light to dark

0
1
2
3
4
5
6
7
8
9
default
<div class="flex m_5 bg_primary m_5">
  <div class="h:[modifier class]-0  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">0</div>
  <div class="h:[modifier class]-1  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">1</div>
  <div class="h:[modifier class]-2  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">2</div>
  <div class="h:[modifier class]-3  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">3</div>
  <div class="h:[modifier class]-4  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">4</div>
  <div class="h:[modifier class]-5  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">5</div>
  <div class="h:[modifier class]-6  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="h:[modifier class]-7  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="h:[modifier class]-8  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="h:[modifier class]-9  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">9</div>
  <div class="h:[modifier class]  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">default</div>
</div>
Copy Code

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

4.1.1.6 Hover:Border Color

hovers can easily effect the border style to toggle between styles. Very useful fo toggling from a border type to none or vice versa.

Class Effect
cursor_pointer pointer
cursor_not-allowed no touch
cursor_grab open hand
cursor_grabbing closed hand
cursor_wait spinning ball

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

4.1.2 active

A common class name given to the parent container can effect the color, background and opacity of the children. The active class is different depending if you are using Bootstrap or Foundation.

This Variation of Arches uses "active"

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

4.1.2.1 active Background Color

Click the areas below to toggle the "active" state.
Set the font color of the child by setting the parent to .active. `a:c_primary`

Example s

bg_primary

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_shade

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_info

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_highlight

text color success color

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_success

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_warning

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

bg_alert

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5
<div class="flex p_5 is-active_toggle-function">
  <div class="flex_auto a:[modifier class]-5 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">5</div>
  <div class="flex_auto a:[modifier class]-4 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">4</div>
  <div class="flex_auto a:[modifier class]-3 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">3</div>
  <div class="flex_auto a:[modifier class]-2 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">2</div>
  <div class="flex_auto a:[modifier class]-1 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">1</div>
  <div class="flex_auto a:[modifier class]-0 bg_shade-2 font_3  text_center br_1 br_solid br_shade-4 p_1">0</div>
  <div class="flex_auto a:[modifier class]-n1 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n1</div>
  <div class="flex_auto a:[modifier class]-n2 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n2</div>
  <div class="flex_auto a:[modifier class]-n3 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n3</div>
  <div class="flex_auto a:[modifier class]-n4 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n4</div>
  <div class="flex_auto a:[modifier class]-n5 bg_shade-2  font_3  text_center br_1 br_solid br_shade-4 p_1">n5</div>
</div>
Copy Code

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

4.1.2.2 active Display

Click the areas below to toggle the "active" state.
Toggle the display type of an object when it's parent 'active'

Example s

none

make the display none when parent is-active

Click to Toggle parent is-active Span with display:none when parent is active

inline

make the display inline when parent is-active

Click to Toggle parent is-active Span with display:inline when parent is active

inline-block

make the display inline-block when parent is-active

Click to Toggle parent is-active Span with display:inline-block when parent is active

block

make the display block when parent is-active

Click to Toggle parent is-active Span with display:block when parent is active 
<div class="p_5 is-active_toggle-function">
  <span class="a:bg_accent bg_shade-2 font_4 text_center br_1 br_solid br_shade-4 p_4">Click to Toggle parent is-active</span>
  <span class="a:[modifier class] a:bg_accent bg_shade-2 font_4 text_center br_1 br_solid br_shade-4 p_4">Span with display:[modifier class] when parent is active</span>
</div>
Copy Code

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

4.1.2.3 active Icons

Click the areas below to toggle the "active" state.
Toggle the display and hide of a an icon with applying `is-active_icon-show` or `is-active_icon-hide`

Example s

fa-award

toggle the award icon

Show When Active
Hide when Active

fa-bell

toggle the bell icon

Show When Active
Hide when Active

fa-bell-slash

toggle the bell slash icon

Show When Active
Hide when Active

fa-bug

toggle the bug icon

Show When Active
Hide when Active
<div class="flex is-active_toggle-function">
  <div class="flex_auto a:bg_accent bg_shade-2 font_3 text_center br_1 br_solid br_shade-4 p_3"><i class="fas font_4 [modifier class] a:icon-show"></i> Show When Active</div>
  <div class="flex_auto a:bg_accent bg_shade-2 font_3 text_center br_1 br_solid br_shade-4 p_3"><i class="fas font_4 [modifier class] a:icon-hide"></i> Hide when Active</div>
</div>
Copy Code

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

4.1.2.4 active font color

Click the areas below to toggle the "active" state.
Set the font color of the child by setting the parent to .active. `a:c_primary`

Example s

c_primary

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_shade

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_info

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_highlight

text color success color

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_success

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_warning

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5

c_alert

text color modified light to dark

5
4
3
2
1
0
n1
n2
n3
n4
n5
<div class="flex p_5 is-active_toggle-function c_white">
  <div class="flex_auto a:[modifier class]-5 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">5</div>
  <div class="flex_auto a:[modifier class]-4 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">4</div>
  <div class="flex_auto a:[modifier class]-3 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">3</div>
  <div class="flex_auto a:[modifier class]-2 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">2</div>
  <div class="flex_auto a:[modifier class]-1 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">1</div>
  <div class="flex_auto a:[modifier class]-0 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">0</div>
  <div class="flex_auto a:[modifier class]-n1 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n1</div>
  <div class="flex_auto a:[modifier class]-n2 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n2</div>
  <div class="flex_auto a:[modifier class]-n3 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n3</div>
  <div class="flex_auto a:[modifier class]-n4 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n4</div>
  <div class="flex_auto a:[modifier class]-n5 font_bold bg_shade-n3 font_5 font_accent: text_center br_1 br_solid br_shade-4 p_1">n5</div>
</div>
Copy Code

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

4.1.2.5 active Black n White

Click the areas below to toggle the "active" state.
Set the background to full white or black when the parent has a class of "active".

Example s

bg_white

text color modified light to dark

0
1
2
3
4
5
6
7
8
9
default

bg_black

text color modified light to dark

0
1
2
3
4
5
6
7
8
9
default
<div class="flex p_5 bg_primary m_5 is-active_toggle-function">
  <div class="flex_auto a:[modifier class] bg_[modifier class]-0 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">0</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-1 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">1</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-2 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">2</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-3 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">3</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-4 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">4</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-5 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4">5</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-6 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-7 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-8 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="flex_auto a:[modifier class] bg_[modifier class]-9 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">9</div>
  <div class="flex_auto  a:[modifier class] bg_[modifier class]-0 p-y_3 p-x_4 font_bold font_2 font_accent: c_shade text_center br_1 br_solid br_shade-4 ">default</div>
</div>
Copy Code

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

4.1.2.6 active Full Opacity

Click the areas below to toggle the `active` state.
`.active .a:opacity` Set the Opacity of an objects children to 100% when it has the class is-active.

Example

Default styling

0
1
2
3
4
5
6
7
8
9 
<div class="flex p_4 bg_primary is-active_toggle-function ">
  <div class="flex_auto opacity_0 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 0 </div>
  <div class="flex_auto opacity_1 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 1 </div>
  <div class="flex_auto opacity_2 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 2 </div>
  <div class="flex_auto opacity_3 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 3 </div>
  <div class="flex_auto opacity_4 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 4 </div>
  <div class="flex_auto opacity_5 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 5 </div>
  <div class="flex_auto opacity_6 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 6 </div>
  <div class="flex_auto opacity_7 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 7 </div>
  <div class="flex_auto opacity_8 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 8 </div>
  <div class="flex_auto opacity_9 a:opacity br_1 br_solid br_white p_2 bg_warning c_white"> 9 </div>
</div>
Copy Code

Example

Default styling

This is a header

This is a card.

It has an easy to override visual style, and is appropriately subdued.

I am so clickable 
<div class="card shadow_2 cell small-6 large-4 max-w_40"  data-style="" >
  <div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
    This is a header
  </div>
  <img src="https://picsum.photos/400/300">
  <div class="card-section card-body">
    <h4>This is a card.</h4>
	 <p>It has an easy to override visual style, and is appropriately subdued.</p>
	 <a href="#" class="expanded-click-area button btn btn-primary">I am so clickable</a>
  </div>
</div>
Copy Code

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

4.3 Link Decorator

Links with the .link will auto decorate with an icon of the corresponding file type. In each brand there the the variable $usingFontAwesome to control if the classes should even render for the brand. $usingFontAwesome's defualt is true.| File | Effect | | --------------- | ---------------------------------------------- | | .pdf | Portable Document Format | | .doc | Word Document | | .txt | Text Document | | .ppt | Power Point | | mailto: | Email | | tel: | Telephone | | fax: | Fax | | target=_blank | External Link icons will appear after any link |

<div class="p_4">
 <a class="link" href="abc.pdf">A link that is a Pdf Document</a><br/>
 <a class="link" href="abc.doc">A link that is a Word Document</a><br/>
 <a class="link" target="_blank" href="https://www.abc.ppt">An External link that is a Power Point Document</a><br/>
 <a class="link" href="tel:1-555-555-5555">1-555-555-5555</a><br/>
 <a class="link" href="mailto:test@abc.org">test@abc.org</a><br/>
 <a class="link" href="xyz.zip">A link that is a Zip Document</a><br/></div>
<div class="bg_shade-n3 p_4">
 <a class="link-light" href="abc.pdf">A link that is a Pdf Document</a><br/>
 <a class="link-light" href="abc.doc">A link that is a Word Document</a><br/>
 <a class="link-light"  target="_blank"  href="https://www.abc.ppt">An External link that is a Power Point Document</a><br/>
 <a class="link-light" href="tel:1-555-555-5555">1-555-555-5555</a><br/>
 <a class="link-light" href="mailto:test@abc.org">test@abc.org</a><br/>
 <a class="link-light" href="xyz.zip">A link that is a Zip Document</a><br/>
</div>
Copy Code

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

4.4 Aspect Ratio

To create an image placeholder use the lorem-loader plus an aspect of the intended image on th parent container while waiting for the image.The placeholder will be a 100% of the container so size the container properly.

Example s

.aspect_8x10

lock image to a 8 to 10 ratio

 

.aspect_1x1

lock image to a 1 to 1 ratio

 

.aspect_2x1

lock image to a 2 to 1 ratio

 

.aspect_3x2

lock image to a 3 to 2 ratio

 

.aspect_4x3

lock image to a 4 to 3 ratio

 

.aspect_16x9

lock image to a 16 to 9 ratio

 

.aspect_21x9

lock image to a 21 to 9 ratio

 

.aspect_4x1

lock image to a 4 to 1 ratio

 
<div class="grid-w_2 max-w_20"  data-style="[modifier class]" >
   <div class="m-y_2 lorem-loader [modifier class] ">&nbsp;</div>
</div>
Copy Code

Example

Default styling

This is a header

This is a card.

It has an easy to override visual style, and is appropriately subdued.

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!

Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!

I am so clickable
<div class="card shadow_2 cell small-6 large-4 max-w_30" >
    <div class=" font_accent: border-top-left-square c_white font_3 p_4 texture_dust card-divider bg_primary card-header">
    This is a header
    </div>
    <div class="card-section card-body p_4 scrollbar-mini overflow_auto" style="max-height:300px;">
        <h4>This is a card.</h4>
        <p class="font_1">It has an easy to override visual style, and is appropriately subdued.</p>
        <img src="https://picsum.photos/400/300">
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
        <p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Sequi dolorem et maxime, officiis nulla vel? Numquam quas voluptatibus, voluptatem fuga saepe animi nemo voluptatum repellendus in natus libero, nobis illum!</p>
    </div>
    <div class="card-divider card-footer br_0 br_solid br-t_1 br_primary"> <a href="#" class="button btn btn-primary">I am so clickable</a></div>
</div>
Copy Code

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

4.6 Stars

experimental

Star ratings should be build throughout arches in a more dynamic way but this is an easy level of adding stars.

.rating-5 - 5 stars .rating-4 - 4 stars .rating-3 - 3 stars .rating-2 - 2 stars .rating-1 - 1 stars

Example

Default styling

caution:
This item is not finalized and might be subject to change 
<ul class="ul_none flex flex_inline star-rating">
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
    <li class="flex_shrink"> <i class="fas fa-star"></i></li>
</ul>
Copy Code

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

4.7 Is Active Toggle

Many momment there are needs for toggles of icon when the parent is in the state of active. Used in tree navs, dropdowns, and collapsing areas.

Example s

.icon-toggle_plus-minus

Toggle between plus and minus square

  • FA Solid icon-toggle_plus-minus active
  • FA Regular icon-toggle_plus-minus active
  • FA Light icon-toggle_plus-minus active

.icon-toggle_chevron-up-down

Toggle a chevron pointing up and then down.

  • FA Solid icon-toggle_chevron-up-down active
  • FA Regular icon-toggle_chevron-up-down active
  • FA Light icon-toggle_chevron-up-down active

.icon-toggle_chevron-double-up-down

Toggle the double chevron to point up when active

  • FA Solid icon-toggle_chevron-double-up-down active
  • FA Regular icon-toggle_chevron-double-up-down active
  • FA Light icon-toggle_chevron-double-up-down active

.icon-toggle_chevron-double-left-right

Toggle chevron left and right

  • FA Solid icon-toggle_chevron-double-left-right active
  • FA Regular icon-toggle_chevron-double-left-right active
  • FA Light icon-toggle_chevron-double-left-right active

.icon-toggle_caret-right-down

Toggle caret right and down

  • FA Solid icon-toggle_caret-right-down active
  • FA Regular icon-toggle_caret-right-down active
  • FA Light icon-toggle_caret-right-down active

.icon-toggle_arrow-circle

Toggle the arrow to have a circle when active.

  • FA Solid icon-toggle_arrow-circle active
  • FA Regular icon-toggle_arrow-circle active
  • FA Light icon-toggle_arrow-circle active

.icon-toggle_bars-times

Toggle between bars and times

  • FA Solid icon-toggle_bars-times active
  • FA Regular icon-toggle_bars-times active
  • FA Light icon-toggle_bars-times active

.icon-toggle_check-sqaure

Check Marks toggle on and off

  • FA Solid icon-toggle_check-sqaure active
  • FA Regular icon-toggle_check-sqaure active
  • FA Light icon-toggle_check-sqaure active

.icon-toggle_check-circle

Check Marks toggle on and off

  • FA Solid icon-toggle_check-circle active
  • FA Regular icon-toggle_check-circle active
  • FA Light icon-toggle_check-circle active

.icon-toggle_check

Check Marks toggle on and off

  • FA Solid icon-toggle_check active
  • FA Regular icon-toggle_check active
  • FA Light icon-toggle_check active 
<ul data-style="[modifier class]" class="ul_none m_0 p_0">
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 fa-solid fa-fw [modifier class]"></i>
			<span class="flex_auto ">FA Solid [modifier class]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 fa-regular  fa-fw [modifier class]"></i>
			<span class="flex_auto ">FA Regular [modifier class]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
	<li class="m-t_1 is-active_toggle-function c_black a:c_white flex p-x_3 p-y_2 a:bg_primary font_1 bg_shade-2 ">
	<i class="flex_none m-r_5 font_3 fa-light fa-fw [modifier class]"></i>
			<span class="flex_auto">FA Light [modifier class]</span>
			<span class="flex_shrink m-l_auto w_20 self_end a:_block display_none"> active </span>
	</li>
</ul>
Copy Code

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

4.8 Animation

Transitions Eases and Transforms.Create simple toggleable animations with a combination of classes.

Example s

out-in

ease timing

0
1
2
3
4
5
6
7
8
9
default

out

ease-out timing

0
1
2
3
4
5
6
7
8
9
default

in

ease-in timing

0
1
2
3
4
5
6
7
8
9
default

in-out

ease-in-out timing

0
1
2
3
4
5
6
7
8
9
default

linear

linear timing

0
1
2
3
4
5
6
7
8
9
default
<div class="flex m_5 bg_primary m_5">
  <div class="transition_3 ease_[modifier class] h:bg_black-0  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">0</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-1  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">1</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-2  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">2</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-3  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">3</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-4  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">4</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-5  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">5</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-6  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-7  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-8  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="transition_3 ease_[modifier class] h:bg_black-9  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">9</div>
  <div class="transition_3 ease_[modifier class] h:bg_black  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">default</div>
</div>
Copy Code

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

4.8.2 Transform Scale

Dynamic adjustment of objects scale for toggling between

Example s

0

Scale to 0%

This is content that will be scaled.

100

Scale to 100%

This is content that will be scaled.

X-0

Scale the X to 0%

This is content that will be scaled.

X-100

Scale the X to 100%

This is content that will be scaled.

Y-0

Scale the X to 0%

This is content that will be scaled.

Y-100

Scale the X to 100%

This is content that will be scaled.
<div class="flex m_5 bg_primary m_5">
  <div class="scale_[modifier class] w-10 p-y_3 p-x_4 font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">This is content that will be scaled.</div>
</div>
Copy Code

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

4.8.3 Transition

Soften the harshness of the switch of the style by adding transitions to the change the speed of transition from decorators.

Example s

0

0 second transition

0
1
2
3
4
5
6
7
8
9
default

1

.1 second transition

0
1
2
3
4
5
6
7
8
9
default

2

.25 second transition

0
1
2
3
4
5
6
7
8
9
default

3

.3 second transition

0
1
2
3
4
5
6
7
8
9
default

4

.5 second transition

0
1
2
3
4
5
6
7
8
9
default

5

1 second transition

0
1
2
3
4
5
6
7
8
9
default
<div class="flex m_5 bg_primary m_5">
  <div class="transition_[modifier class] h:bg_black-0  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">0</div>
  <div class="transition_[modifier class] h:bg_black-1  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">1</div>
  <div class="transition_[modifier class] h:bg_black-2  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">2</div>
  <div class="transition_[modifier class] h:bg_black-3  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">3</div>
  <div class="transition_[modifier class] h:bg_black-4  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">4</div>
  <div class="transition_[modifier class] h:bg_black-5  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4">5</div>
  <div class="transition_[modifier class] h:bg_black-6  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">6</div>
  <div class="transition_[modifier class] h:bg_black-7  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">7</div>
  <div class="transition_[modifier class] h:bg_black-8  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">8</div>
  <div class="transition_[modifier class] h:bg_black-9  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">9</div>
  <div class="transition_[modifier class] h:bg_black  p-y_3 p-x_4 flex_auto font_bold font_2 font_accent: text_center br_1 br_solid br_shade-4 ">default</div>
</div>
Copy Code

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

4.8.4 Rotation

Rotation through transform. Transform doesn't modify the displacement of the flow. This also have an active class modifier

Example s

rotate_45

Rotate by 45 degrees

rotate_90

Rotate by 90 degrees

rotate_135

Rotate by 135 degrees

rotate_180

Rotate by 180 degrees

rotate_225

Rotate by 225 degrees

rotate_270

Rotate by 270 degrees

rotate_315

Rotate by 315 degrees 

<i class="font_10 fas fa fa-user [modifier class]"></i>
Copy Code

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

4.8.5 Rotation on Active

Add in the a: in front of these classes gives you the rotation only when the item is active.

These classes are effected by the parent having active state.

Example s

rotate_45

Rotate by 45 degrees

Not Active Active

rotate_90

Rotate by 90 degrees

Not Active Active

rotate_135

Rotate by 135 degrees

Not Active Active

rotate_180

Rotate by 180 degrees

Not Active Active

rotate_225

Rotate by 225 degrees

Not Active Active

rotate_270

Rotate by 270 degrees

Not Active Active

rotate_315

Rotate by 315 degrees

Not Active Active 
<span><i class="font_10 fas fa fa-user a:[modifier class]"></i> Not Active </span>
<span><i class="active font_10 fas fa fa-user a:[modifier class]"></i> Active </span>
Copy Code

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

4.9 Extras

Extras include user modification and other classes that modify the user interactions and experiences

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

4.9.1 User Select

User interaction classes that define how the user can interact with the text of the element.

  • User on click will select All

    .user-select_all

  • User on click will select Nothing

    .user-select_none

  • User on click will select Browser Default

    .user-select_auto

  • User on click will select Only the text

    .user-select_text