BaseCard e BaseCardGrid

O BaseCard agrupa um bloco de conteúdo da página, com título opcional: um resumo, uma lista de dados ou um formulário curto. O BaseCardGrid põe cartões lado a lado, com a mesma altura em cada linha.

Orçamento

Valor contratado de R$ 1.250.000,00, com duas medições aprovadas.

Uso

• Use para separar blocos que a pessoa lê um de cada vez. Para dividir um formulário, use o BaseFormSection.
• O title vira um <h2> com a aparência de h4. Use o cartão dentro de uma página cujo título é o <h1>, como no BasePage.
• Sem title, o cartão é só a moldura; dê um título ao conteúdo de dentro se ele precisar de um.
• Com icon, o ícone do assunto aparece antes do título, com 20 px. Use o ícone do assunto na página Ícones, o mesmo do menu. O ícone é decorativo: o leitor de tela lê só o título.
• Uma borda por bloco: a BaseDataTable, o BaseKpiCard e o formulário (.tj-form) já são cartões. Não ponha nenhum deles dentro de um BaseCard. Para dar título a uma tabela, use o cartão com flush: o conteúdo vai de borda a borda e a tabela perde a própria borda.
• O corpo do cartão empilha o que vem dentro a 16 px: o título, o texto, as listas e as ações. Não escreva margem entre eles; para uma lista de links dentro do cartão, use o BaseStack.
• O slot footer fica sempre no fim do cartão. Use para o link ou a nota que fecha o bloco, como "Abrir relatório" ou "Valores com BDI".
• Para cartões lado a lado, use o BaseCardGrid. Ele põe quantas colunas couberem, com a largura mínima de size, e deixa os cartões de cada linha da altura do mais alto da linha, então os rodapés se alinham.

Cartão com ícone

Medições

Boletim do mês, do lançamento ao PDF para o SEI.

Cartão com tabela

Medições do contrato

Medições do contrato

Nº	Mês de referência	Valor do mês	Situação
Nº2ª	Mês de referênciaabril/2026	Valor do mêsR$ 140.355,18	SituaçãoAberta
Nº1ª	Mês de referênciamarço/2026	Valor do mêsR$ 125.026,50	SituaçãoFechada

2 registros

Valores com BDI.

Cartões lado a lado

Contratos ativos

5

em execução e paralisados

Valor atual

R$ 23,5 mi

com BDI, soma dos contratos

Atenção: Com alerta

3

veja a lista de alertas

Ver alertas

Saldo do contrato

Saldo físico e financeiro de cada item, com os totais do contrato.

Abrir saldo do contrato

Itens em atenção

Itens retidos.

Abrir itens em atenção

Fiscalização

Em dia

Prazos

Término em 30/11/2027.

Anatomia

1. Moldura: o .card do Bootstrap, com fundo, borda e raio.
2. Título: opcional, vem de title e aparece como <h2> com a aparência de h4.
3. Conteúdo: o slot padrão, logo abaixo do título; com flush, de borda a borda.
4. Rodapé: o slot footer, sempre no fim do cartão.
5. Grade: o BaseCardGrid, com as colunas e o intervalo --tj-page-gap.

Faça e não faça

Faça	Não faça
Um cartão "Orçamento" com o valor contratado e as medições aprovadas.	Pôr o formulário inteiro do contrato num cartão só; divida com BaseFormSection.
Títulos curtos que dizem o assunto, como "Fiscalização" ou "Prazos".	Cartão dentro de cartão para separar dois dados do mesmo processo.
BaseCard flush com a BaseDataTable dentro, quando a tabela precisa de título.	BaseCard comum em volta da BaseDataTable: a borda e o espaço dobram.
BaseCardGrid para indicadores e atalhos lado a lado.	Uma grade montada com display: grid e margens na tela, com cartões de alturas diferentes.
Usar o cartão dentro de uma página que já tem o <h1>.	Usar o cartão como botão ou link para abrir a obra; ele não recebe clique nem foco.

Estilo

Propriedade	Token
Fundo e borda	o .card do Bootstrap: fundo --bs-body-bg (ligado a --tj-background), borda --bs-border-color
Espaço interno	--bs-card-spacer-x e --bs-card-spacer-y; zero no conteúdo com flush
Título	papel tipográfico h4
Ícone do título	--tj-icon-md (20 px), cor --tj-icon-secondary, a --tj-space-2 do texto
Corpo	uma pilha: título, texto, listas e ações a --tj-space-4 um do outro, sem as margens próprias deles
Tabela no cartão flush	sem borda, raio e sombra próprios
Intervalo da grade	--tj-page-gap (24 px) nas duas direções
Largura mínima na grade	sm 224 px, md 280 px, lg 360 px, nunca mais que a largura da área

Código

<BaseCard title="Contratos em execução e paralisados" flush>
  <BaseDataTable :columns="columns" :rows="rows" row-key="id" label="Contratos ativos" />
  <template #footer>
    <BaseText variant="small" tone="muted">Valores com BDI.</BaseText>
  </template>
</BaseCard>

<BaseCardGrid size="sm">
  <BaseKpiCard v-for="kpi in kpis" :key="kpi.label" v-bind="kpi" />
</BaseCardGrid>

Propriedades

BaseCard

Propriedade	Tipo	Padrão	Descrição
title	string	—	Título do cartão, renderizado como <h2>
icon	string	—	Ícone do Bootstrap Icons antes do título, com 20 px; decorativo, porque o título já diz o assunto
flush	boolean	false	Conteúdo de borda a borda, para uma BaseDataTable ou uma lista com linhas próprias; título e rodapé mantêm o espaço

Slot	Conteúdo
padrão	O conteúdo do cartão
footer	O fim do cartão: um link ou uma nota

BaseCardGrid

Propriedade	Tipo	Padrão	Descrição
size	'sm' | 'md' | 'lg'	'md'	Largura mínima de cada cartão: sm 224 px (indicadores), md 280 px (atalhos e resumos), lg 360 px

Slot	Conteúdo
padrão	Os cartões: BaseCard ou BaseKpiCard

Acessibilidade

• Não há padrão do WAI-ARIA APG para cartão. Ele é uma <section> com um título comum; como o título não dá nome à seção, ela não vira região na lista do leitor de tela.
• Não recebe foco: o foco fica com os links, botões e campos do conteúdo.
• O cartão é uma <section>; com title, o <h2> dá o nome dele na estrutura de títulos da página.
• A grade é só um <div> de layout: a ordem de leitura e de Tab é a ordem dos cartões no código.
• Testado com axe com e sem título, com flush e rodapé, e na grade.