Image Box
The Image box promotes content through the usage of an image. It can be presentational or clickable.
The default image box shows an image that stretches to fit the component in a way that its central area always visible.
Make sure to choose an image with an adequate proportion since the element width is flexible and will adapt the image size to fill the available space.
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">You can still put <a class="hcr-link-11-6-3" href="#">links</a> inside of flowing text.</p>
</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">Pretty useful if you're tight on space.</p>
</div>
</div>Linked image box
For the linked variations the whole element needs to be a link element.
Notice that linked image boxes will always be outlined.
<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">The whole box is a link.</p>
</div>
</a><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">Note the added outline and interaction states.</p>
</div>
</a>Outlined image box
You can apply the --outlined modifier to trigger the outlined variation for the non-linked version.
Non-linked image boxes don't have the arrow decoration since they cannot be interacted with.
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--space-flush">Outlined image box</h3>
</div>
</div>Image with caption
For displaying images with captions or credits you should use the outlined variation with centralized text in small font.
Also the figure and figure caption markup should be used for good semantics, this enables screen readers to announce that the text inside the figcaption element contains details about the image.
Use a small text with centralized text and flushed spaces for proper visual styling.
Photo credits - Honeycomb 2022
<figure class="flix-img-box flix-img-box--outlined">
<div class="flix-img-box__img-wrapper">
<img class="flix-img-box__img" alt="Image link placeholder image" src="/img/img-placeholder-color.png"/>
</div>
<figcaption class="flix-img-box__content">
<p class="flix-text flix-text--small flix-has-text-centered">
Photo credits - Honeycomb 2022
</p>
</figcaption>
</figure>