Base Card
Base Card é um container altamente modular que agrupa conteúdos relacionados com suporte a múltiplos estados visuais e comportamentais, permitindo personalização ampla por meio de slots e espaçamentos
Uso
O Base Card deve ser utilizado para organizar e destacar blocos de conteúdo relacionados, como cards de produtos, artigos ou playlists. É ideal para contextos que exigem interatividade, flexibilidade de layout e consistência visual, oferecendo suporte a múltiplos estados (como hover, pressed e disabled) e permitindo a combinação de diversos componentes internos por meio de slots configuráveis. Recomenda-se atenção especial ao uso de skins com opacidade (como Outline), evitando sobreposições que comprometam a legibilidade ou a estrutura visual.
Anatomia
❖. Container
Recebe tokens de aparência visual (filled, tonal, outline) e suporta estados como hover, pressed e disabled. Deve ser aplicado conforme o contexto e combinando corretamente as skins com os estados.
1. Slot
Espaços modulares para inserção de outros componentes do sistema, como botões, ícones, textos, imagens ou tags. Os slots funcionam de forma autônoma, podendo ser organizados em linha (slot line) ou coluna (slot column). A quantidade de slots é livre e pode ser expandida até uma matriz de 10x10, conforme a necessidade do conteúdo.
2. Spacing Horizontal (Opcional)
Controla o espaçamento entre os componentes dentro de um mesmo bloco ou linha. Deve ser ajustado de acordo com o tipo de conteúdo e densidade desejada.
3. Spacing Vertical (Opcional)
Define o espaçamento entre blocos empilhados (como colunas de slots). É personalizável e fundamental para manter hierarquia e ritmo visual entre as seções.
Variantes
Filled
Variante com preenchimento de fundo sólido neutro. Ideal para contextos densos ou onde o card precisa se destacar do plano de fundo sem competir visualmente. É a skin padrão para usos gerais.
Tonal
Variante com preenchimento baseado na cor temática do contexto. Usado quando há a necessidade de reforçar uma identidade visual ou categoria dentro do produto (ex: cards de playlist, destaque editorial).
Outline
Variante com contorno definido e fundo transparente. Indicada para casos em que o conteúdo do card já se destaca naturalmente (ex: cards com imagens) ou quando se quer uma separação sutil sem interferir no fundo.
Comportamento
A modularidade dos slots permite que cada área interna do card tenha interações próprias ou compartilhe o mesmo estado global do container, dependendo da composição adotada. Os espaçamentos dinâmicos entre os elementos permitem que o card se ajuste visualmente a contextos variados, preservando consistência. Skins com opacidade, como Outline, devem ser usadas com cuidado para evitar colisão visual com conteúdos internos.
Use cases
Referências
Histórico de Atualizações
Atualizado