Card - Superlógica Design Language

Como utilizar

import { Box, Card, Icon, Text } from '@superlogica/design-system'

<Card
  leftIcon={<Icon name="alarm-bell" />}
  borderColor="babar100"
  paddingSize="sm"
  title="Card Header"
  info="Teste de info"
  radius="md"
>
  <Box paddingSize="sm">
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae
      laoreet metus. Nunc nisi massa, malesuada et aliquet a, ullamcorper
      eget nibh. Donec ipsum nulla, rutrum ut ligula at, efficitur molestie
      quam. Pellentesque varius tempus tempor. Nulla eget venenatis velit.
      Donec quis ipsum quis enim accumsan congue.
    </Text>
  </Box>
</Card>

<Card
  leftIcon={<Icon name="alarm-bell" />}
  borderColor="babar100"
  paddingSize="sm"
  title="Card Header"
  info="Teste de info"
  radius="md"
>
  <Box paddingSize="sm">
    <Text>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. In vitae
      laoreet metus. Nunc nisi massa, malesuada et aliquet a, ullamcorper
      eget nibh. Donec ipsum nulla, rutrum ut ligula at, efficitur molestie
      quam. Pellentesque varius tempus tempor. Nulla eget venenatis velit.
      Donec quis ipsum quis enim accumsan congue.
    </Text>
  </Box>
</Card>

Props

Prop	Tipo	Default	Descrição
border	`bool`	true	Adiciona borda no componente.
borderColor	`string`	ghost	Cor da borda.
bgColor	`string`	ghost	Cor do background.
paddingType	`string`	square	Tipo de padding do componente (square ou squish).
paddingSize	`string`	sm	Tamanho do padding (xxs, xs, sm, md, lg, xl).
radius	`string`	none	Tamanho do borderRadius (none, xs, sm, md)
title	`string`	none	Título do card
leftIcon	`node`	none	Adiciona um ícone à esquerda
info	`string`	none	Ícone de info à direita com tooltip com o texto passado