Card Informative
O Card Informative é um contêiner flexível que agrupa informações referentes a um contexto e funciona como um ponto de acesso para ações ou detalhes adicionais.
Uso
Este componente deve ser utilizado para organizar e apresentar visualmente um conjunto de informações relacionadas dentro de uma tela. O uso deve ser limitado a agrupar itens que façam sentido temático, como informações sobre uma música.
Anatomia
❖. Container
A área de fundo que delimita o card e possui skin outline. É o alvo da interação primária (clique) para exibir mais detalhes.
1. Título (Opcional)
Um texto conciso que resume o propósito do Dialog. Pode ou não conter descrição.
2. Slot (Opcional)
Área flexível e customizável dentro do corpo do card, destinada a receber qualquer elemento necessário para enriquecer a informação resumida.
3. Button
Elemento de interação que permite ao usuário realizar uma ação específica relacionada ao Card sem necessariamente abrir o Modal/Sheet principal. O botão de ação deve ser aplicado como uma ação secundária ou terciária ao contexto do card. Sua interação é independente do clique no Container Principal.
Variantes
O Card Informative possui apenas variantes de estados de interação, sendo aplicável apenas com a skin outline .
Posicionamento
Em relação a ele mesmo
Cards relacionados devem ser empilhados verticalmente com espaçamento consistente. Caso o layout permita, podem ser dispostos lado a lado, respeitando o sistema de colunas do grid.
Layout Responsivo
Em breakpoints de telas maiores (tablet, desktop), o Card quando sozinho em uma linha deve está em Hug ou ocupando até 50% da largura da tela. Em breakpoints de telas menores (mobile), o Card deve ocupar 100% da largura disponível do seu contêiner para garantir a legibilidade do conteúdo e o alvo de toque.
Comportamento
Interação Primária (Card Inteiro)
O clique no Container Principal aciona a navegação para um Modal ou Sheet.
Interações Secundárias (Componentes Internos)
Os elementos internos (título, botão) possuem seus próprios estados de interação (Hover/Pressed) e devem ser clicáveis independentemente do Card.
Prioridade: Ao clicar em um elemento interno (botão), a ação desse elemento deve ter prioridade sobre a ação do Container Principal.
Feedback Visual: As interações nos elementos internos não devem acionar o estado Hover/Pressed do Card como um todo, garantindo que o usuário receba feedback claro sobre qual elemento específico está sendo interagido.
Use cases
Histórico de Atualizações
Atualizado