Banner

Use Banner component to create a box with a optional header, text, optional left-hand icon, optional right-hand close button, and palette color scheme.

This is a Banner
<Banner px={3} py={2} showIcon={false}>
  This is a Banner
</Banner>

Are Your Dates Correct?

Remember to double check the calendar because availability may change depending on your dates.
<Banner
  showIcon={false}
  bg='lightBlue'
  p={2}>
  <Flex>
    <Icon name='calendar' />
    <Box pl={2}>
      <Heading fontSize={2} bold>Are Your Dates Correct?</Heading>
      <Text>
        Remember to double check the calendar because availability may change depending on your dates.
      </Text>
    </Box>
  </Flex>
</Banner>

Props

PropTypeDescription
bgstringSets background-color and color. Accepts blue, green, orange, red, lightBlue, lightGreen, lightOrange, lightRed
headerstringSets header content
iconNamestringSets left-hand svg icon name
onClosefunctionPasses onClick functionality to close button / shows close button if provided
showIconbooleanRenders left-hand icon (true by default)
textstringSets text content
textAlignstringSets text alignment for text only (icons not affected)