Image Box
The Image box promotes content through the usage of an image. It can be presentational or clickable.
Image boxes have text and linked variations:
Image box with text
You can still put links inside of flowing text.
<div class="flix-img-box">
<div class="flix-img-box__img-wrapper">
<img class="flix-img-box__img" alt="Image box placeholder image" src="/img/img-placeholder-grey.png"/>
</div>
<div class="flix-img-box__content">
<h3 class="flix-h3">Image box with text</h3>
<p class="flix-text flix-space-flush-bottom">You can still put <a class="hcr-link-4-5-5" href="#">links</a> inside of flowing text.</p>
</div>
</div><a class="flix-img-box" href="#">
<div class="flix-img-box__img-wrapper">
<img class="flix-img-box__img" alt="Image box placeholder image" src="/img/img-placeholder-grey.png"/>
</div>
<div class="flix-img-box__content">
<h3 class="flix-h3 flix-h3--section-header">Linked image box</h3>
<p class="flix-text flix-space-flush-bottom">The whole box is a link.</p>
</div>
</a>Outlined image box
Note that linked image box always has an outline.
flix-img-box--outlined CSS modifier triggers outlined variation for the non-linked version.
Outlined image box
<div class="flix-img-box flix-img-box--outlined">
<div class="flix-img-box__img-wrapper">
<img class="flix-img-box__img" alt="Image box placeholder image" src="/img/img-placeholder-grey.png"/>
</div>
<div class="flix-img-box__content">
<h3 class="flix-h3 flix-h3--section-header">Outlined image box</h3>
</div>
</div>Smaller image box
By using the flix-img-box--sm modifier you can switch between the normal and the smaller version of the component.
Smaller variation
Pretty useful if you're tight on space.
<div class="flix-img-box flix-img-box--sm">
<div class="flix-img-box__img-wrapper">
<img class="flix-img-box__img" alt="Small image box placeholder Image" src="/img/img-placeholder-grey.png"/>
</div>
<div class="flix-img-box__content">
<h3 class="flix-h3 flix-h3--section-header">Smaller variation</h3>
<p class="flix-text flix-space-flush-bottom">Pretty useful if you're tight on space.</p>
</div>
</div><a class="flix-img-box flix-img-box--sm" href="#">
<div class="flix-img-box__img-wrapper">
<img class="flix-img-box__img" alt="Small linked image box placeholder Image" src="/img/img-placeholder-grey.png"/>
</div>
<div class="flix-img-box__content">
<h3 class="flix-h3 flix-h3--section-header">Smaller linked variation</h3>
<p class="flix-text flix-space-flush-bottom">Note the added outline and interaction states.</p>
</div>
</a>Images
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 for the linked variation the whole element itself needs to be a link element.
