Arches: ACC & Bootstrap

Arches:ACC & Bootstrap

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/acc_boot.css, line 7203

6.13 Ordered Cards

Having cards order on page to help users find there way through steps can some times be very helpful.

Example

Default styling

First it is bad

This is a card.

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

Then it is not right

This is a card.

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

At last it is good

This is a card.

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

<div class="flex texture_medium counter_reset p_5">
   <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_alert">
            <div class="flex_shrink p_3  bg_alert-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">First it is bad</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
      <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_warning">
            <div class="flex_shrink p_3  bg_warning-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">Then it is not right</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
      <div class="card texture_light bg_white shadow_2 flex_auto m-x_3">
      <div class="flex font_accent:  font_3 br-t_square c_white font_3 texture_dust bg_success">
            <div class="flex_shrink p_3  bg_success-n4"><span class="counter counter_increment font_5 lh_0 font_display c_whsite"></span></div>
      <div class="flex_auto p_3">At last it is good</div>
      </div>
      <div class="card-section p-x_4 p-y_3">
      <h4>This is a card.</h4>
      <p>It has an easy to override visual style, and is appropriately subdued.</p>
      </div>
   </div>
</div>
Copy Code