Call Out

The Call Out component displays a decorative image alongside a piece of highlighted text content.

Please note, the image used should not be important to the page content, because it will always be obscured by the text content to some degree.

⚠️ This component only supports link based actions right now.

Props

Name	Type	Description
`childen`	`React.ReactNode`	The call out content. Actions should be specified via the `actions` prop.
`media`	`React.ReactNode`	The call out media. Usually, this should use the provided `Image` component.
`reduceOverlap`	`boolean`	Reduce the portion of the image that is overlapped by the content.
`actions`	`Action[]`	An array of actions to be applied.

Usage


<Box maxWidth='60rem'>
  <CallOut
    media={
      <CallOutImage src='/img/ticket-machine.jpg' alt='Customers using ticket machine' />
    }
    actions={[
      {
        label: 'Purchase a single ticket',
        href: '#'
      },
      {
        label: 'Purchase a season pass',
        href: '#'
      }
    ]}
  >
    <Heading variant='delta'>
      Lorem amet nibh
    </Heading>
    <Text>Suscipit sodales in elit ut nibh vivamus ut, adipiscing, malesuada sed. Nunc sapien vivamus sollicitudin amet sit sed in suscipit risus. Ipsum orci vestibulum elit sit adipiscing, lorem faucibus ante amet quis malesuada orci. Est sed, porttitor in dolor tortor est sollicitudin porttitor, faucibus.</Text>
  </CallOut>
</Box><Box maxWidth='60rem'>
  <CallOut
    media={
      <CallOutImage src='/img/ticket-machine.jpg' alt='Customers using ticket machine' />
    }
    actions={[
      {
        label: 'Purchase a single ticket',
        href: '#'
      },
      {
        label: 'Purchase a season pass',
        href: '#'
      }
    ]}
  >
    <Heading variant='delta'>
      Lorem amet nibh
    </Heading>
    <Text>Suscipit sodales in elit ut nibh vivamus ut, adipiscing, malesuada sed. Nunc sapien vivamus sollicitudin amet sit sed in suscipit risus. Ipsum orci vestibulum elit sit adipiscing, lorem faucibus ante amet quis malesuada orci. Est sed, porttitor in dolor tortor est sollicitudin porttitor, faucibus.</Text>
  </CallOut>
</Box>

Reduce overlap


<Box maxWidth='60rem'>
  <CallOut
    media={
      <CallOutImage src='/img/ticket-machine.jpg' alt='Customers using ticket machine' />
    }
    actions={[
      {
        label: 'Purchase a single ticket',
        href: '#'
      },
      {
        label: 'Purchase a season pass',
        href: '#'
      }
    ]}
    reduceOverlap
  >
    <Heading variant='delta'>
      Lorem amet nibh
    </Heading>
    <Text>Suscipit sodales in elit ut nibh vivamus ut, adipiscing, malesuada sed. Nunc sapien vivamus sollicitudin amet sit sed in suscipit risus. Ipsum orci vestibulum elit sit adipiscing, lorem faucibus ante amet quis malesuada orci. Est sed, porttitor in dolor tortor est sollicitudin porttitor, faucibus.</Text>
  </CallOut>
</Box><Box maxWidth='60rem'>
  <CallOut
    media={
      <CallOutImage src='/img/ticket-machine.jpg' alt='Customers using ticket machine' />
    }
    actions={[
      {
        label: 'Purchase a single ticket',
        href: '#'
      },
      {
        label: 'Purchase a season pass',
        href: '#'
      }
    ]}
    reduceOverlap
  >
    <Heading variant='delta'>
      Lorem amet nibh
    </Heading>
    <Text>Suscipit sodales in elit ut nibh vivamus ut, adipiscing, malesuada sed. Nunc sapien vivamus sollicitudin amet sit sed in suscipit risus. Ipsum orci vestibulum elit sit adipiscing, lorem faucibus ante amet quis malesuada orci. Est sed, porttitor in dolor tortor est sollicitudin porttitor, faucibus.</Text>
  </CallOut>
</Box>