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 13692

2.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

Default styling

Click to Toggle parent is-active Span with display:[modifier class] when parent is active

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