<!-- Caption on the left --><figureclass="figure"><imgsrc="assets/img/portfolio/list/01.jpg"class="figure-img"alt="..."><figcaptionclass="figure-caption">Caption on the left</figcaption></figure><!-- Caption in the center --><figureclass="figure"><imgsrc="assets/img/portfolio/list/02.jpg"class="figure-img"alt="..."><figcaptionclass="figure-caption text-center">Caption in the center</figcaption></figure><!-- Caption on the right --><figureclass="figure"><imgsrc="assets/img/portfolio/list/04.jpg"class="figure-img"alt="..."><figcaptionclass="figure-caption text-end">Caption on the right</figcaption></figure>
// Caption on the leftfigure.figureimg(src="assets/img/portfolio/list/01.jpg",alt="...").figure-imgfigcaption.figure-captionCaption on the left// Caption in the centerfigure.figureimg(src="assets/img/portfolio/list/02.jpg",alt="...").figure-imgfigcaption.figure-caption.text-centerCaption in the center// Caption on the rightfigure.figureimg(src="assets/img/portfolio/list/04.jpg",alt="...").figure-imgfigcaption.figure-caption.text-endCaption on the right
<!-- Image swap on hover --><ahref="#"class="swap-image"><imgsrc="assets/img/landing/saas-1/brands/champion-color.svg"class="swap-to"width="180"alt="Champion"><divclass="swap-from"><imgsrc="assets/img/landing/saas-1/brands/champion-gray.svg"class="d-dark-mode-none"width="180"alt="Champion"><imgsrc="assets/img/landing/saas-1/brands/champion-light.svg"class="d-none d-dark-mode-block"width="180"alt="Champion"></div></a>
// Image swap on hovera(href="#").swap-imageimg(src="assets/img/landing/saas-1/brands/champion-color.svg",width="180",alt="Champion").swap-to.swap-fromimg(src="assets/img/landing/saas-1/brands/champion-gray.svg",width="180",alt="Champion").d-dark-mode-noneimg(src="assets/img/landing/saas-1/brands/champion-light.svg",width="180",alt="Champion").d-none.d-dark-mode-block