Hug

Use the Hug component to surround another component with a border and a banner on top. Pass in props.children to be wrapped.

I hug my props.children
Hello
<Hug
  icon={<Check />}
  text={<Text.span>I hug my props.children</Text.span>}>
  <Card p={4}>
    Hello
  </Card>
</Hug>

Props

PropTypeDescription
iconDisplaystring or array of stringsResponsive display property of icon
iconstringSVG icon name
textnode, array of nodes, or stringWhen providing a node, it is highly recommended to use a <Text.span /> node, to keep text on a single line