Images & figures
Image styles and figure component for displaying images and text.
Image shapes
<!-- Square image (default) -->
<img src="assets/img/portfolio/list/04.jpg" alt="Square image">
<!-- Rounded image -->
<img src="assets/img/portfolio/list/03.jpg" class="rounded-5" alt="Rounded image">
<!-- Circle image -->
<img src="assets/img/portfolio/list/01.jpg" class="rounded-circle" alt="Circle image">Thumbnails
<!-- Square thumbnail -->
<img src="assets/img/portfolio/list/04.jpg" class="img-thumbnail rounded-0" alt="Square thumbnail">
<!-- Rounded thumbnail (default) -->
<img src="assets/img/portfolio/list/03.jpg" class="img-thumbnail" alt="Rounded thumbnail">
<!-- Circle thumbnail -->
<img src="assets/img/portfolio/list/01.jpg" class="img-thumbnail rounded-circle" alt="Circle thumbnail">Figures with caption
<!-- Caption on the left -->
<figure class="figure">
<img src="assets/img/portfolio/list/01.jpg" class="figure-img" alt="...">
<figcaption class="figure-caption">Caption on the left</figcaption>
</figure>
<!-- Caption in the center -->
<figure class="figure">
<img src="assets/img/portfolio/list/02.jpg" 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="assets/img/portfolio/list/04.jpg" class="figure-img" alt="...">
<figcaption class="figure-caption text-end">Caption on the right</figcaption>
</figure>Image swap on hover
<!-- Image swap on hover -->
<a href="#" class="swap-image">
<img src="assets/img/landing/saas-1/brands/champion-color.svg" class="swap-to" width="180" alt="Champion">
<div class="swap-from">
<img src="assets/img/landing/saas-1/brands/champion-gray.svg" class="d-dark-mode-none" width="180" alt="Champion">
<img src="assets/img/landing/saas-1/brands/champion-light.svg" class="d-none d-dark-mode-block" width="180" alt="Champion">
</div>
</a>