Arches: CVquality

Arches:CVquality

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/cvquality_boot.css, line 7580

5.1.8 Card Positions

Placing cards inside of content areas is needed within the design. Placing some utility classes will acomplish this with a responsive toggle.

Style Combo Effect Classes
position-right-lg floats the card when the veiwport is large up. max-w_20 clear_right:lg float_right:lg w_20:lg
position-right-md floats the card when the veiwport is medium up. max-w_20 clear_right:md float_right:md w_40:md w_20:lg
position-right-sm floats the card when the veiwport is small up. max-w_20 clear_right float_right w_50 w_40:md w_20:lg
position-left-lg floats the card when the veiwport is small up. max-w_20 clear_left:lg float_left:lg w_20:lg
position-left-md floats the card when the veiwport is medium up. max-w_20 clear_left:md float_left:md w_40:md w_20:lg
position-left-sm floats the card when the veiwport is large up. max-w_20 clear_left float_left w_50 w_40:md w_20:lg

Example

Default styling

Positioned Small Right

Container Classes:max-w_1 clear_right float_right w_50 w_40:md w_20:lg

Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.

Action
<div class="bg_primary-alt br_1 br_primary-4 br_radius card highlighted shadow_1 max-w_20 clear_right float_right w_50 w_40\:md w_20\:lg ">
 <h2 class="bg_tansparent br-b_0 c_secondary c_shade-n4 card-header font_1 font_2:md font_display p-b_3 p-x_3 p-x_3:md p-x_4:lg uppercase">Positioned Small Right</h2>
  <div class="card-body font_0 font_1:md font_ui lh_2 p-b_0 p-x_3 p-x_3:md p-x_4:lg p-y_0">
  <p class=" font_n2"> Container Classes:max-w_1 clear_right float_right w_50 w_40:md w_20:lg</p>
  <p>Repudiandae adipisci illum omnis et suscipit at amet ex. Error magni laborum autem et rerum porro asperiores sunt. Et veritatis rerum voluptas hic eum sint. Ipsa labore eos autem cupiditate ut molestiae sit fugiat. Rerum sit dolorem veritatis est quia nesciunt tenetur ut. Animi earum illo sed incidunt fuga.</p>
  </div>
   <div class="bg_tansparent br-t_0 card-footer p-t_0 p-x_3 p-x_3:md p-x_4:lg"> <a href="#" class="btn btn-block btn-primary font_0:md font_n1">Action</a></div>
</div>
Copy Code