> For the complete documentation index, see [llms.txt](https://wedocs.gitbook.io/wedocs-5.1/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://wedocs.gitbook.io/wedocs-5.1/wedocs-4.6/client-desktop/criacao-e-edicao-de-dashboards/componente-cartao.md).
# Componente Cartão
### Exemplo**:**
O componente *Cartão* traz a possibilidade de sumarização de valores de forma simples e agrupados em divisões de Séries. Outra aplicação prática deste objeto, é a viabilidade de analisar variações de valores automaticamente, verificando um valor monitorado em relação a um valor alvo, e em paralelo podendo ser classificados.
As unidades de cada divisão do cartão podem assumir cores, conforme regras de formatação, que podem ser cores fixas ou assumir cores dinamicamente de acordo com valores atualizados provenientes do metadado deste objeto.
Para sua criação, na última tela do assistente do componente *Cartão*, é necessário selecionar pelo menos um campo e arrastá-lo para a área *Valores* e, se desejado, poderá ser adicionado um ou mais campos para a área *Séries*, dividindo o valor em diversos cartões.
A listagem à esquerda da tela são os *Campos* *disponíveis*, conforme disponibilizados pelo metadado informado na confecção do componente em fases anteriores. Caso algum campo estiver faltando ou ainda não existir edite o seu metadado, ou crie um campo calculado.
Para os campos em *Séries* é possível alterar sua formatação. Essa opção é uma funcionalidade genérica e possui mais informações no tópico **Componentes -** **Opções Gerais** deste mesmo documento.
Já para *Valores*, para análise de um valor simples basta arrastar um campo na área valores, e onde então será possível alterar o título, a função de agregação (Soma, Média, Contagem, Máximo, Mínimo) e sua formatação.
Caso 2 valores sejam referenciados em conjunto nesta área valores, o primeiro valor será um valor monitorado e comparado ao segundo valor citado. Ao utilizar esta técnica, podemos aplicar o cálculo automático de variação, que será visto em algumas das próximas telas de configuração deste objeto.
### Exemplo de resultado prático:
Em seu modo de edição permite realizar alterações no seu *layout* incluindo a *Formatação* *Condicional* e *Personalizações*. Para configurar uma escala de cores para os cartões, por exemplo, basta entrar na opção *Menu* *Lateral* >> *Cartão* *(Padrão)* >> *Cor de fundo* >> *Modo* e selecionar a opção *Escala*:
Nessa opção será possível utilizar os padrões de escala vindos de fábrica e modificá-los conforme necessidade ou ainda criar a sua própria escala selecionando qual a *Variável* que está sendo utilizada.
Outra opção importante são as configurações das *Linhas*, em qual as cores, textos e ícones que aparecem como conteúdo são selecionados e formatados de acordo com a necessidade.
O cartão possui três linhas, duas menores nas áreas *Inferior* e *Superior* do cartão e uma mais destacada denominada *Intermediária*.
Na imagem acima é possível visualizar um exemplo da formatação da *Linha* *inferior* do cartão. Dentre as opções disponíveis, destaca-se o campo *Texto* para configuração das variáveis que serão dispostas na linha e o *Ícone* que trará um símbolo de acordo com a variação calculada.
Em *Menu* *Lateral* >> *Aparência* >> *Geral* >> *Colunas* é possível selecionar quantas colunas de cartões será apresentado. Caso o número de colunas informado seja zero, o componente se autodistribuirá conforme espaçamento em tela. Não há limite para o número de colunas, logo deverá ser configurado da forma que melhor atender as necessidades do indicador, exemplos:
A partir da versão 2.5, o Weknow conta com opções de tratamento de quebra de texto conforme necessidade do contexto. Esta opção também se encontra a disposição dentre as opções em:\
*Menu* *Lateral* >> *Aparência* >> *Geral* >> *Colunas*.
Ao encerrar as configurações necessárias, clique em **CONCLUIR**.