Basic Card

O basic card é um conteiner que suporta apenas estados de elementos internos individualmente, adequados para diversas interações e visualizações

Figma

---

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

Meaning

Floating Meaning

Streaming Connection

Onboarding Benefits

Plan

Modal Onboarding

---

Referências

Material Design

---

Histórico de Atualizações

Figma	Gitbook	Android	iOS	Web
16/04/2024	22/04/2024			Ver na tabela

Percebeu um erro, ficou com dúvida ou tem uma sugestão?

Contribua com o Kósmos preenchendo nosso formulário de contribuição — sua colaboração ajuda a tornar o Design System mais claro, útil e evolutivo para todo o time.