Pular para o conteúdo
Camaleo
PT · ENGitHub
// visualizar em
salvo em todas as páginas

Card

Cartão — uma caixa que reúne um assunto só, como um plano, um projeto ou uma configuração, com título, conteúdo e ações. Use quando a pessoa compara ou passa os olhos por vários deles lado a lado.

Padrão Static containerComponente de servidorCódigo ↗

Instalação

Configure o Camaleo uma vez (Instalação) e importe o que precisar. Ele renderiza no servidor.

import { Card, CardHeader, CardTitle, CardDescription, CardContent, CardFooter } from "@camaleo/react";

Anatomia

Um cabeçalho com o título e uma descrição curta, o conteúdo e um rodapé para as ações. Use só as partes de que você precisa. Cada parte tem um data-slot que você pode usar no CSS.

Exemplos

Cada exemplo é um arquivo real que você pode copiar. Todos usam o estilo, o modo e a cor escolhidos na barra acima.

minimal · light · #3fa34d

Disponibilidade em setembro

Todas as regiões, verificadas a cada minuto.

99,98% no ar. Uma queda de 9 minutos em 12/09, durante a atualização do banco de dados.

Convidar Rafael Souza

rafael.souza@acme.com.br

O Rafael vai poder editar os 3 projetos deste espaço de trabalho. Você pode mudar isso depois.

Com ações

Coloque os botões no CardFooter, com o principal por último. Assim a pessoa encontra as ações no mesmo lugar em todos os cards.

Como reduzimos o tempo do checkout em 40%

Estudo de caso · 6 min de leitura

Menos campos, endereços salvos e uma tela de pagamento em vez de três.

Pagamentos

O card inteiro como link

Clique em qualquer parte do card. O link fica no título, então o leitor de tela fala um nome curto, e o data-card-link nele estica o link sobre o card. Não transforme o card num botão.

Plano

Cards para escolher

Clique num card ou use as setas. Cada card é o rótulo de um rádio, então clicar em qualquer parte escolhe a opção, e a legenda dá nome ao grupo.

Formulários acessíveis em 5 passos

Rótulos, erros e ordem do foco, com exemplos para copiar.

Com imagem

Uma imagem no topo ajuda a reconhecer um guia ou um produto. Se ela só enfeita, esconda com aria-hidden.

Chamados abertos

42

8 a mais que na semana passada

Compacto

Menos espaço interno para números de painel. Mantenha o título: é ele que diz a todo mundo o que o número significa.

Notas fiscais

Nenhuma nota fiscal ainda

A primeira nota aparece aqui depois do primeiro pagamento, em 05/11.

Ainda sem nada

Um card vazio continua com o título, explica por que está vazio e oferece o próximo passo, em vez de sumir da tela.

  • Novo checkout

    Ana Silva

    No prazo

  • App 3.0

    Rafael Souza

    Em risco

  • Central de ajuda

    Juliana Costa

    Pausado

Cards em grade

Uma lista de cards é uma lista: use ul e li, para o leitor de tela dizer quantos são. A grade se ajusta sozinha no celular.

Em contexto

Cada card guarda um assunto. São pedaços inteiros de interface para copiar, no estilo que você escolheu.

Equipe

R$ 149/mês
  • Até 20 pessoas
  • Projetos e comentários compartilhados
  • Funções e permissões de administrador
Plano de assinaturaCard · Button

Assinaturas ativas

14.820+18,4% em relação ao trimestre anterior
Número do painelCard · Badge · Link

Verificação em duas etapas

Uma segunda etapa quando você entra num aparelho novo.

Ativada: um app autenticador e 8 códigos de reserva. Último uso em 21/10.

Configuração de segurançaCard · Button

Boas práticas

Renovação do plano Equipe

Renova em 30/11.

20 lugares, R$ 149 por mês. A cobrança vai no cartão final 4242.

FaçaUse o cabeçalho e o conteúdo do card.

Eles cuidam do espaçamento e do estilo do título, e o card fica certo em todos os estilos.

Renovação do plano Equipe
Renova em 30/11.
20 lugares, R$ 149 por mês. A cobrança vai no cartão final 4242.
EviteDivs soltas dentro do card.

O título deixa de ser um título de verdade, e o espaçamento quebra quando a pessoa troca de estilo.

Renovação do plano Equipe

Renova em 30/11.

20 lugares, R$ 149 por mês. A cobrança vai no cartão final 4242.

FaçaDivida o card com uma linha.

Um separador divide o conteúdo e mantém uma caixa só em volta de um assunto.

Renovação do plano Equipe

Renova em 30/11.

EviteUm card dentro de outro.

Caixa dentro de caixa desperdiça espaço no celular e confunde o que pertence a quê.

Props

PropriedadeTipoPadrãoDescrição

O Card e cada parte renderizam HTML simples e aceitam os atributos dele: Card, CardHeader, CardContent e CardFooter são <div>, CardTitle é <h3> e CardDescription é <p>.

Styling hooks

Mude o visual sem copiar o componente: use os slots ou defina os tokens num elemento pai, num estilo ou no próprio card.

Atributos

data-card-linkno link do título: estica o link sobre o card, que mostra o anel de foco

Tokens que ele lê

Cor

--cml-border--cml-fg--cml-fg-muted--cml-focus-offset--cml-focus-ring--cml-focus-width--cml-radius-surface--cml-surface-raised

Forma e tamanho

--cml-border-width--cml-gap

Tipografia e movimento

--cml-font-display--cml-font-weight-display

Só deste componente

--cml-card-border--cml-card-shadow--cml-corner-shape

Acessibilidade

TabPassa pelos links, botões e campos dentro do card. O card em si nunca recebe foco.

Relacionados

LinkO link no título de um card clicável.Empty stateO que o card mostra quando ainda não tem nada.StatUm número com rótulo e tendência, para cards de painel.
Esta página foi útil? · Editar esta página no GitHub