Image styles and figure component for displaying images and text.
import ImageLoader from '../components/ImageLoader'
{/* Square image (default) */}
<ImageLoader
src='/images/components/03.jpg'
width={256}
height={256}
alt='Square image'
/>
{/* Rounded image */}
<ImageLoader
src='/images/components/02.jpg'
width={256}
height={256}
alt='Rounded image'
className='rounded-3'
/>
{/* Circle image */}
<ImageLoader
src='/images/components/01.jpg'
width={256}
height={256}
alt='Circle image'
className='rounded-circle'
/>
import ImageLoader from '../components/ImageLoader'
{/* Square thumbnail */}
<div className='img-thumbnail rounded-0'>
<ImageLoader
src='/images/components/03.jpg'
width={256}
height={256}
alt='Square thumbnail'
/>
</div>
{/* Rounded thumbnail (default) */}
<div className='img-thumbnail'>
<ImageLoader
src='/images/components/02.jpg'
width={256}
height={256}
alt='Rounded thumbnail'
/>
</div>
{/* Circle thumbnail */}
<div className='img-thumbnail rounded-circle'>
<ImageLoader
src='/images/components/01.jpg'
width={256}
height={256}
alt='Circle thumbnail'
/>
</div>
import ImageLoader from '../components/ImageLoader'
import Figure from 'react-bootstrap/Figure'
{/* Figure caption on the left (default) */}
<Figure>
<ImageLoader
src='/images/components/01.jpg'
width={256}
height={256}
alt='Figure with caption'
className='rounded'
/>
<Figure.Caption>Caption on the left</Figure.Caption>
</Figure>
{/* Figure Caption in the center */}
<Figure>
<ImageLoader
src='/images/components/02.jpg'
width={256}
height={256}
alt='Figure with caption'
className='rounded'
/>
<Figure.Caption className='text-center'>Caption in the center</Figure.Caption>
</Figure>
{/* Figure caption on the right */}
<Figure>
<ImageLoader
src='/images/components/03.jpg'
width={256}
height={256}
alt='Figure with caption'
className='rounded'
/>
<Figure.Caption className='text-end'>Caption on the right</Figure.Caption>
</Figure>
import ImageSwap from '../components/ImageSwap'
{/* Non-clickable div example */}
<ImageSwap
swapFrom={{
imgSrc: '/images/real-estate/brands/02_gray.svg',
imgSize: [196, 80],
imgAlt: 'Image from'
}}
swapTo={{
imgSrc: '/images/real-estate/brands/02_color.svg',
imgSize: [196, 80],
imgAlt: 'Image to'
}}
/>
{/* Clickable link example */}
<ImageSwap
href='#'
swapFrom={{
imgSrc: '/images/real-estate/brands/04_gray.svg',
imgSize: [196, 80],
imgAlt: 'Image from'
}}
swapTo={{
imgSrc: '/images/real-estate/brands/04_color.svg',
imgSize: [196, 80],
imgAlt: 'Image to'
}}
/>