1. Styleguide
2. Images

Images

.aspect--ratio is used to maintain a ratio before image is loaded. Supported ratios are: aspect--1-1, aspect--3-1, aspect--3-2 and aspect--2-1. Always use in a seperate wrapping div.

<div class="aspect--1-1">
   <img src="..." />
</div>

<div class="aspect--2-1">
   <img src="..." />
</div>

<div class="aspect--3-1">
   <img src="..." />
</div>

<div class="aspect--3-2">
   <img src="..." />
</div>

Responsive aspect

Sometimes a ratio is 3-2 and changes to 3-1 (wide) when the screensize is bigger than 700px. To do this you can use an additional modifier.

<div class="aspect--3-2 aspect-700--3-1">
   <picture>
      <source srcset="..." media="(min-width:768px)">
      <img alt="" src="...">
   </picture>
</div>