Highlighted Card

Props

Name	Type	Default	Description
`bg`	`string`	`-`	Highlighted card background image
`textAlign`	`string`	`center`	Set card `text-align`
`px`	`number`	`4`	X axis padding
`py`	`number`	`5`	Y axis padding
`maxWidth`	`string`	`-`	Set card `max-width`
`primaryAction`	`Action`	`-`	Set primary card action

Usage


<HighlightedCard
  bg='statuses.success.1'
  maxWidth='21.333rem'
  px={4}
  py={5}
  primaryAction={{
    component: ({ children }) => <Link href='/tickets' passHref>{children}</Link>
  }}
>
  <Stack>
    <Icon
      icon='faTicketAlt'
      fontSize='alpha'
    />
    <Heading fontSize='delta'>Tickets and Bookings</Heading>
    <Text textAlign='left'>Can’t find what you need? Check our frequently asked questions.</Text>
  </Stack>
</HighlightedCard><HighlightedCard
  bg='statuses.success.1'
  maxWidth='21.333rem'
  px={4}
  py={5}
  primaryAction={{
    component: ({ children }) => <Link href='/tickets' passHref>{children}</Link>
  }}
>
  <Stack>
    <Icon
      icon='faTicketAlt'
      fontSize='alpha'
    />
    <Heading fontSize='delta'>Tickets and Bookings</Heading>
    <Text textAlign='left'>Can’t find what you need? Check our frequently asked questions.</Text>
  </Stack>
</HighlightedCard>