A simple component to describe the various benefits of a product.
Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.
Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.
Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.
Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.
import IconBox from '../components/IconBox'
{/* Icon box: Rounded font icon media */}
<IconBox
media='fi-bed'
title='Rounded font icon media'
text='Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.'
className='pb-2 mb-4'
/>
{/* Icon box: Rounded image media */}
<IconBox
media='image'
imageSrc='/images/job-board/blog/thumbs/01.jpg'
title='Rounded image media'
text='Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.'
className='pb-2 mb-4'
/>
{/* Icon box: Cicle font icon media (accent color) */}
<IconBox
media='fi-cafe'
mediaColor='accent'
mediaShape='circle'
title='Cicle font icon media'
text='Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.'
className='pb-2 mb-4'
/>
{/* Icon box: Cicle image media */}
<IconBox
media='image'
mediaShape='circle'
imageSrc='/images/job-board/blog/thumbs/02.jpg'
title='Cicle image media'
text='Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.'
className='pb-2 mb-4'
/>
Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.
Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.
import IconBox from '../components/IconBox'
{/* Center aligned */}
<IconBox
media='fi-apartment'
title='Center aligned'
text='Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.'
align='center'
className='pb-2 mb-4'
/>
{/* Right aligned */}
<IconBox
media='fi-apartment'
title='Right aligned'
text='Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.'
align='end'
className='pb-2 mb-4'
/>
import IconBox from '../components/IconBox'
{/* Icon box card type with border */}
<IconBox
href='#'
media='fi-meds'
mediaShape='circle'
title='Border card'
type='card'
align='center'
className='mb-4'
/>
{/* Icon box card type with shadow */}
<IconBox
href='#'
media='fi-house-chosen'
mediaShape='circle'
title='Shadow card'
type='card-shadow'
align='center'
className='mb-4'
/>
{/* Icon box card type with color background */}
<IconBox
href='#'
media='fi-spa'
mediaShape='circle'
title='Background card'
type='card'
align='center'
className='bg-secondary border-0 mb-4'
/>
import IconBox from '../components/IconBox'
{/* Icon box horizontal card type with border (Rounded) */}
<IconBox
href='#'
media='fi-meds'
title='Border card'
type='pill-rounded'
className='mb-4'
/>
{/* Icon box horizontal card type with shadow (Rounded) */}
<IconBox
href='#'
media='fi-house-chosen'
title='Shadow card'
type='pill-rounded-shadow'
className='mb-4'
/>
{/* Icon box horizontal card type with color background (Rounded) */}
<IconBox
href='#'
media='fi-spa'
title='Background card'
type='pill-rounded'
className='bg-secondary border-0 mb-4'
/>
{/* Icon box horizontal card type with border (Pill) */}
<IconBox
href='#'
media='fi-meds'
title='Border card'
type='pill'
className='mb-4'
/>
{/* Icon box horizontal card type with shadow (Pill) */}
<IconBox
href='#'
media='fi-house-chosen'
title='Shadow card'
type='pill-shadow'
className='mb-4'
/>
{/* Icon box horizontal card type with color background (Pill) */}
<IconBox
href='#'
media='fi-spa'
title='Background card'
type='pill'
className='bg-secondary border-0 mb-4'
/>
import IconBox from '../components/IconBox'
{/* Primary icon box */}
<IconBox
media='fi-apartment'
mediaShape='circle'
title='Primary icon box'
align='center'
/>
{/* Accent icon box */}
<IconBox
media='fi-bath'
mediaShape='circle'
mediaColor='accent'
title='Accent icon box'
align='center'
/>
{/* Success icon box */}
<IconBox
media='fi-bed'
mediaShape='circle'
mediaColor='success'
title='Success icon box'
align='center'
/>
{/* Info icon box */}
<IconBox
media='fi-billboard-house'
mediaShape='circle'
mediaColor='info'
title='Info icon box'
align='center'
/>
{/* Warning icon box */}
<IconBox
media='fi-cafe'
mediaShape='circle'
mediaColor='warning'
title='Warning icon box'
align='center'
/>
{/* Danger icon box */}
<IconBox
media='fi-cctv'
mediaShape='circle'
mediaColor='danger'
title='Danger icon box'
align='center'
/>
Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.
import IconBox from '../components/IconBox'
{/* Light basic icon box */}
<IconBox
media='fi-spa'
title='Basic icon box'
text='Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.'
light
align='center'
/>
{/* Light card icon box */}
<IconBox
href='#'
media='fi-spa'
mediaShape='circle'
title='Card icon box'
type='card'
light
align='center'
/>
{/* Light pill icon box */}
<IconBox
href='#'
media='fi-meds'
title='Pill icon box'
type='pill'
light
/>