Cartões

Os cards podem conter uma grande variedade de informações, como texto, ícones, imagens, respostas do Gemini ou ações.

Princípios

Coesão: os cards agrupam informações e ações relacionadas em uma única unidade digerível.

Clareza: eles apresentam o conteúdo de maneira clara e organizada, melhorando a capacidade de leitura.

Versatilidade: os cards podem se adaptar para mostrar uma ampla variedade de conteúdo, desde pequenos textos até resumos mais complexos com vários elementos.

Modularidade: projetados para serem modulares e reutilizáveis em diferentes partes da interface do Jetpack Compose Glimmer para óculos.

Uso e posicionamento

Os cards podem conter uma grande variedade de informações, como texto, ícones, imagens, ações ou respostas do Gemini.

Use os modelos de card do Jetpack Compose Glimmer para conteúdo, já que eles vêm em muitas variações e são otimizados para seguir os princípios de design de óculos.

check_circle

O que fazer

Mantenha o conteúdo conciso e atento às práticas recomendadas de estilo, como o uso de cores.

cancel

O que não fazer

Não sobrecarregue os usuários com muito conteúdo nos cards nem abandone as diretrizes de estilo.

Use um grupo de botões com um card para mostrar mais de uma ação.

check_circle

O que fazer

Tenha exatamente um botão aninhado em um card para um foco mais claro.

cancel

O que não fazer

Não tenha vários botões em um card. Os cards não devem ser tratados como uma caixa de diálogo para dispositivos móveis.

Anatomia

Os cards são criados com modelos de slot predefinidos.

1. Cabeçalho: a seção superior do card, projetada para conter uma imagem. 

2. Título e subtítulo: esses campos de texto fornecem os rótulos principal e secundário do card. 

3. Ícone principal: um ícone opcional que aparece no início da área de conteúdo do card.

4. Ícone à direita: um ícone opcional que aparece no final da área de conteúdo do card.

5. Ação: um slot para um elemento interativo principal, como um botão. Isso permite que os usuários realizem uma ação diretamente do card. Se um card tiver uma ação, ele só poderá conter uma.

6. Conteúdo principal: o corpo principal do card, onde você coloca o texto principal ou outro conteúdo.

Foco

Para cards cujo objetivo principal é abrigar um elemento interativo específico (como o botão na ação), o foco precisa ir diretamente para esse elemento, não para o contêiner do card. Um card se torna focalizável quando representa um único item navegável, como uma entrada em uma lista. Isso oferece uma experiência do usuário mais direta e acessível.

Um card que tem foco como um item de lista.

Um botão em um card recebe foco como o elemento acionável.

Personalização