Layout

Cartão de conteúdo

Card

Um bloco que reúne informações sobre um único assunto, com uma hierarquia visual clara.

Abc01

DESIGN NA PRÁTICAUma ideia, muitas formas.Explorar coleção ↗

Exemplo didático · Representação visual do padrão

Quando usar

Apresentar produtos, artigos ou projetos em uma coleção.

Cuidados e acessibilidade

Evite várias áreas clicáveis ambíguas ou links aninhados.

Partes e comportamento

Título, conteúdo principal e possíveis mídia, metadados e ações.

Não confunda

Um cartão é uma unidade de conteúdo; sua forma retangular não o torna automaticamente um botão.

Exemplo de código

<article>
  <h2><a href="/projeto/">Biblioteca UI</a></h2>
  <p>Um dicionário visual de interfaces.</p>
</article>

Trecho didático. Integre e teste no contexto do seu projeto.

Peça assim para uma IA

Crie um componente de interface do tipo Cartão de conteúdo (Card) em português do Brasil. Um bloco que reúne informações sobre um único assunto, com uma hierarquia visual clara. Contexto de uso: Apresentar produtos, artigos ou projetos em uma coleção. Estrutura: Título, conteúdo principal e possíveis mídia, metadados e ações. Referência técnica: <article>. Requisito: Evite várias áreas clicáveis ambíguas ou links aninhados. Considere também: Um cartão é uma unidade de conteúdo; sua forma retangular não o torna automaticamente um botão. Adapte cores e tipografia ao projeto. Cubra estados inicial, foco, ativo, indisponível, carregamento, vazio e erro quando aplicáveis. Garanta contraste legível, comportamento responsivo, movimento reduzido e acesso por teclado. Use textos em PT-BR, valores em reais e datas no formato brasileiro quando houver. Explique quais partes exigem integração real e não simule sucesso sem concluir a operação.

Consultar referência técnica ↗Copiar link deste termo ↗