Card

Apresentação

O componente Card é responsável por exibir informações em um container com estilo de cartão, oferecendo uma estrutura organizada para apresentar conteúdo relacionado. O componente é composto por subcomponentes que permitem uma estruturação clara do conteúdo.

Quando usar

• Para exibir informações agrupadas
• Para criar layouts de cartões em grid ou lista
• Para apresentar produtos ou serviços
• Para mostrar perfis de usuário
• Para exibir conteúdo em destaque
• Para criar cards de notícias ou artigos

Forma básica de uso

import { Card } from 'eitri-luminus';

// Card básico
<Card>
  <Card.Image>
    <img src="/imagem.jpg" alt="Descrição" />
  </Card.Image>
  <Card.Body>
    <Card.Title>Título do Card</Card.Title>
    <p>Conteúdo do card</p>
  </Card.Body>
  <Card.Actions>
    <button>Botão</button>
  </Card.Actions>
</Card>

// Card com dimensões personalizadas
<Card width="300px" height="400px">
  <Card.Body>
    <Card.Title>Card com tamanho fixo</Card.Title>
    <p>Conteúdo do card</p>
  </Card.Body>
</Card>

// Card com classes personalizadas
<Card className="bg-primary text-white">
  <Card.Body>
    <Card.Title className="text-xl">Card personalizado</Card.Title>
    <p>Conteúdo do card</p>
  </Card.Body>
</Card>

Propriedades

Card

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o card
id	string	Identificador único do componente
width	string	Largura do card
height	string	Altura do card
minWidth	string	Largura mínima do card
maxWidth	string	Largura máxima do card
minHeight	string	Altura mínima do card
maxHeight	string	Altura máxima do card

Card.Image

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para a imagem

Card.Body

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o corpo
id	string	Identificador único do componente

Card.Title

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para o título
id	string	Identificador único do componente

Card.Actions

Propriedade	Tipo	Descrição
className	string	Classes CSS adicionais para as ações
id	string	Identificador único do componente

Heranças

O componente Card e seus subcomponentes herdam todas as propriedades comuns da biblioteca através da interface CommonProps, que inclui:

• Propriedades de estilo (margin, padding, etc)
• Propriedades de layout (flex, grid, etc)
• Propriedades de posicionamento
• Propriedades de acessibilidade
• Propriedades de identificação (id, data-e)

Observações

• O componente é composto por subcomponentes que facilitam a estruturação do conteúdo
• Por padrão, o componente usa a classe 'card' que define o estilo base
• É possível personalizar a aparência usando classes do Tailwind
• O componente é responsivo por padrão
• Recomenda-se manter uma hierarquia visual clara entre título, corpo e ações
• O componente suporta imagens, textos e elementos interativos
• As ações geralmente contêm botões ou links relacionados ao conteúdo do card