Icon box

A simple component to describe the various benefits of a product.

Finder component

Media type and shape

Rounded font icon media

Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

Rounded image media

Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

Cicle font icon media

Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

Cicle image media

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'
/>

Alignment

Center aligned

Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

Right aligned

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'
/>

Card style

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'
/>

Pill style

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'
/>

Color variants

Primary icon box

Accent icon box

Success icon box

Info icon box

Warning icon box

Danger icon box

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'
/>

Light version

Basic icon box

Aenean urna dictum adipiscing nec, cras quisque. Nunc in mauris.

Card icon box

Pill icon box

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
/>