Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

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

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