Arches: Utility Classes

Arches:Utility Classes

Multi Product Brand Style System by the American College of Cardiology

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

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