Image Link (deprecated)
Image links promote certain links on a page through imagery.
<a class="flix-img-link" href="#">
<div class="flix-img-link__img-wrapper">
<img class="flix-img-link__img" alt="Image link placeholder image" src="/img/img-placeholder-grey.png"/>
</div>
<div class="flix-img-link__content">
<h3 class="flix-h3 flix-h3--section-header">Amsterdam</h3>
<p class="flix-text flix-space-flush-bottom">from $22.00</p>
</div>
</a>
<h4 class="flix-h4">Smaller image link</h4>
<a class="flix-img-link flix-img-link--sm" href="#">
<div class="flix-img-link__img-wrapper">
<img class="flix-img-link__img" alt="Small image link placeholder Image" src="/img/img-placeholder-grey.png"/>
</div>
<div class="flix-img-link__content">
<h3 class="flix-h3 flix-h3--section-header">Amsterdam</h3>
<p class="flix-text flix-space-flush-bottom">from $22.00</p>
</div>
</a>Details
Make sure to choose an image with a right proportion, element width is flexibile and it will adapt image size to occupy the whole container in a way that central area is always visible. Note that the whole element itself needs to be a link element.
By using the flix-img-link--sm modifier you can switch between the normal and the smaller version of the component.
