![Cartzilla](../img/logo-dark.png)
Images & figures
Image styles and figure component for displaying images and text.
Image shapes
![Square image](../img/components/images/01.jpg)
![Rounded image](../img/components/images/02.jpg)
![Circle image](../img/components/images/03.jpg)
<!-- Square image (default) -->
<img src="path-to-image" alt="Square image">
<!-- Rounded image -->
<img src="path-to-image" class="rounded-3" alt="Rounded image">
<!-- Circle image -->
<img src="path-to-image" class="rounded-circle" alt="Circle image">
// Square image (default)
img(src="path-to-image", alt="Square image")
// Rounded image
img(src="path-to-image", alt="Rounded image").rounded-3
// Circle image
img(src="path-to-image", alt="Circle image").rounded-circle
Thumbnails
![Square thumbnail](../img/components/images/01.jpg)
![Rounded thumbnail](../img/components/images/02.jpg)
![Circle thumbnail](../img/components/images/03.jpg)
<!-- Square thumbnail -->
<img src="path-to-image" class="img-thumbnail" alt="Square image">
<!-- Rounded thumbnail -->
<img src="path-to-image" class="img-thumbnail rounded" alt="Rounded image">
<!-- Circle thumbnail -->
<img src="path-to-image" class="img-thumbnail rounded-circle" alt="Circle image">
// Square tumbnail
img(src="path-to-image", alt="Square image").img-thumbnail
// Rounded tumbnail
img(src="path-to-image", alt="Rounded image").img-thumbnail.rounded
// Circle tumbnail
img(src="path-to-image", alt="Circle image").img-thumbnail.rounded-circle
Figures with caption
![Figure with caption](../img/components/images/03.jpg)
![Figure with caption](../img/components/images/01.jpg)
![Figure with caption](../img/components/images/02.jpg)
<!-- Caption on the left -->
<figure class="figure">
<img src="path-to-image" class="figure-img" alt="...">
<figcaption class="figure-caption">Caption on the left</figcaption>
</figure>
<!-- Caption in the center -->
<figure class="figure">
<img src="path-to-image" class="figure-img" alt="...">
<figcaption class="figure-caption text-center">Caption in the center</figcaption>
</figure>
<!-- Caption on the right -->
<figure class="figure">
<img src="path-to-image" class="figure-img" alt="...">
<figcaption class="figure-caption text-end">Caption on the right</figcaption>
</figure>
// Caption on the left
figure.figure
img(src="path-to-image", alt="...").figure-img
figcaption.figure-caption Caption on the left
// Caption in the center
figure.figure
img(src="path-to-image", alt="...").figure-img
figcaption.figure-caption.text-center Caption in the center
// Caption on the right
figure.figure
img(src="path-to-image", alt="...").figure-img
figcaption.figure-caption.text-end Caption on the right