Image
Container for images. If you want to use a <picture> tag, import each image to your site in 3 different sizes, and call them s-name-of-image.jpg, m-name-of-image.jpg and l-name-of-image.jpg.
File to include
@import "components/image";Auto height
<img src="/assets/images/l-pic-img.jpg" alt="Image">Fixed height, cover
<img src="/assets/images/l-pic-img.jpg" alt="Image" data-fit="cover" height="250">Fixed height, contain
<img src="/assets/images/l-pic-img.jpg" alt="Image" data-fit="contain" height="250">With caption
Caption
<div class="img-container">
<img src="/assets/images/l-pic-img.jpg" alt="Image" data-fit="cover" height="300">
<p class="caption">Caption</p>
</div>Attributes
| Name | Example value | Possible values | Default | Required |
|---|---|---|---|---|
| data-fit | cover | "fill" | "contain" | "cover" | "none" | "scale-down" | "inherit" | "initial" | "revert" | "revert-layer" | "unset" | None | No |