Basic Card
O basic card é um conteiner que suporta apenas estados de elementos internos individualmente, adequados para diversas interações e visualizações
Observações adicionais
Cada unidade individual do slot funciona de maneira autônoma, permitindo a substituição flexível por um 'slot line' ou 'slot column'. Essa modularidade facilita o alinhamento central dos elementos empilhados em relação aos demais itens, ampliando as opções de configuração e personalização do componente.
A skin clear só existe se o componente receber a combinação com shadow.
Uso
O componente de basic card é utilizado para agrupar conteúdos relacionados e facilitar a navegação. Apenas elementos internos são interativos, como botões.
Don't
A skin outline do base card usa o token appearance/200, um token com opacidade. Nesses casos, nunca deixe que um elemento ultrapasse ou encoste na borda. (Esse caso pode acontecer nos layouts por uma limitação do Figma, mas não deve ser desenvolvido com esse erro)
Anatomia
1. Container (Opcional)
Recebe token de cor no Outline, clear, fill, tonal, stroke e state de acordo com o contexto.
2 e 3. Spacing (Opcional)
2 Spacing interno entre slots I 3 Spacing externo empilhado entre as linhas. Os spacings podem ser ajustados em tamanho e quantidade conforme os slots lines e column.
4. Slot
Espaços reservados para componentes que façam sentido para o contexto. Podem ser substituídos por botões, tags, thumbnail e outros. Ajuste a quantidade de slot conforme a necessidade do card, os slots vão até 10 x 10 slots.
Use cases
Referências
Histórico de Atualizações
Atualizado