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: Online Video Library

Arches:Online Video Library

Multi Product Brand Style System by the American College of Cardiology

Source: dist/css/library_boot.css, line 11778

8.1.3 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

Default styling

 

.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]" >
   <div class="m-y_2 lorem-loader [modifier] ">&nbsp;</div>
</div>
Copy Code