BaseHeading e BaseText

BaseHeading dá título a uma página ou seção. BaseText escreve o texto corrido, legendas, sobretítulos e códigos. Os dois usam os papéis tipográficos do Carbon, em Roboto e Roboto Mono, as fontes do portal do TJES.

Contratos de obras

Medição de outubro aberta até 10/11.

Itens da planilha

Alvenaria de vedação com bloco cerâmico 14×19×29 cm.

Atualizado há 5 minutos

Uso

• Um h1 por tela: o título da página, que o BasePage já cria. As seções e os cartões da página usam h2; o BaseCard já renderiza o título como h2 com o estilo h4. O que fica dentro de um cartão usa h3.
• Não pule níveis: depois de um h2 vem um h3, nunca um h4.
• O nível (level) diz a estrutura; o estilo (variant) diz o tamanho. Quando o tamanho certo não bate com o nível, troque o variant, nunca o level. Os exemplos desta página fazem isso: todos usam um nível que cabe na seção em que estão.
• Todo título tem texto. Um título vazio atrapalha quem navega por títulos.
• O sobretítulo (overline) não entra no título: quem navega por títulos não o ouve. Se ele dá o contexto do título, coloque esse contexto no texto do próprio título ("Itens da planilha do contrato CF001/2022") ou ponha o sobretítulo depois do título no código e inverta a ordem só na tela, com order do flexbox.
• Um número de painel não é título. O título diz o que o número mede ("Valor contratado"); o número fica no corpo do cartão, logo depois do título.
• Frase em caixa normal: "Aprovar medição", não "Aprovar Medição". Maiúsculas só no sobretítulo, e é o estilo que as aplica.
• Números que se comparam (valores, quantidades, datas em coluna) usam numeric.
• Nada abaixo de 12 px. Negrito não é enfeite.

Títulos

Obras do TJES · display

Título de página · h1

Seção · h2

Seção dentro do cartão e modal · h3

Título de cartão e grupo · h4

Estilo	Papel no Carbon	Tamanho	Quando
display	display-01	40/48 · 700	Título de destaque, como a abertura de uma página inicial
h1	heading-05	30/38 · 600	Título da página, um por tela; 24/32 em telas de até 575 px
h2	heading-04	24/32 · 600	Seção
h3	heading-03	20/28 · 600	Seção dentro do cartão, modal
h4	heading-02	16/24 · 600	Título do BaseCard, grupo; padrão dos níveis 4 a 6

Textos

Subtítulo e leitura · body-lg

Corpo do sistema e célula de tabela · body

Rótulo, ajuda e selo · small

Legenda e data de atualização · caption

Sobretítulo · overline

0001234-56.2026.8.08.0024 · 2026NE000412

Estilo	Papel no Carbon	Tamanho	Quando
body-lg	body-02	16/24 · 400	Subtítulo, texto de leitura
body	body-01	14/20 · 400	Corpo do sistema, célula
small	label-02	13/18 · 400	Rótulo, ajuda, selo
caption	helper-text-01	12/16 · 400	Legenda, informação de apoio
overline	label-01	12/16 · 600	Sobretítulo, cabeçalho de tabela
code	code-02	14/20 · 400	Número de contrato, processo e empenho

Tons

Medição enviada para análise.

Carregando orçamento…

Medição aprovada em 12/10/2026.

Erro ao carregar o orçamento. Tente de novo.

O tom reforça o texto, nunca o substitui: a frase diz "aprovada" ou "erro", a cor só confirma. O tom vale também sobre caption e overline, que têm cor própria.

O BaseText usa danger e success, e não o error do BaseBadge, para manter as classes tj-text--danger e tj-text--success que o sistema já usa.

Números

R$ 1.111.111,11

R$ 9.999.999,99

Com numeric, cada algarismo ocupa a mesma largura e os valores se alinham em coluna.

Estilo

Propriedade	Token
Família	--tj-font-sans (Roboto), --tj-font-mono no code
Tamanho	--tj-text-xs a --tj-text-4xl
Entrelinha	--tj-leading-xs a --tj-leading-4xl
Peso	--tj-weight-regular, --tj-weight-semibold, --tj-weight-bold
Cor do título	--tj-text-primary
Cor de caption e overline	--tj-text-helper
Tom muted	--tj-text-helper
Tom danger	--tj-support-error-text
Tom success	--tj-support-success-text

As cores trocam sozinhas no tema escuro.

Código

<BaseHeading :level="1">Contratos de obras</BaseHeading>
<BaseHeading :level="3">Valor contratado</BaseHeading>
<BaseText numeric>R$ 186,4 mi</BaseText>
<BaseText tone="muted">Carregando orçamento…</BaseText>
<BaseText as="span" variant="code">CF001/2022</BaseText>
<BaseText numeric>{{ total.format() }}</BaseText>

BaseHeading

Propriedade	Tipo	Padrão	Descrição
level	1 | 2 | 3 | 4 | 5 | 6	2	Elemento <h1> a <h6>, a estrutura da página. Um valor fora dessa lista vira 2
variant	'display' | 'h1' | 'h2' | 'h3' | 'h4'	o do nível	Estilo visual, independente do nível

BaseText

Propriedade	Tipo	Padrão	Descrição
as	'p' | 'span' | 'div'	'p'	Elemento HTML: p para parágrafo, span dentro de uma linha, div para um bloco com outros blocos
variant	'body' | 'body-lg' | 'small' | 'caption' | 'overline' | 'code'	'body'	Papel tipográfico
tone	'default' | 'muted' | 'danger' | 'success'	'default'	Cor do texto; default mantém a cor do estilo
numeric	boolean	false	Algarismos tabulares

Os dois componentes não emitem eventos. Atributos como id passam para o elemento, para ligar um título a uma região com aria-labelledby.

Acessibilidade

• O level gera o elemento de título real, que o leitor de tela usa para navegar pela página. Mudar o tamanho com variant não muda a estrutura.
• Siga a ordem dos níveis e use um só h1 por tela (WCAG 1.3.1 e 2.4.6).
• O sobretítulo fica em maiúsculas só pela folha de estilo. O texto no código fica em caixa normal; não digite em maiúsculas.
• Os tons danger e success e a cor de apoio (muted, caption, overline) têm contraste de 4,5:1 ou mais sobre o fundo e as camadas 01 e 02, nos dois temas (menor valor: 5,07:1, success no tema claro sobre o fundo). Sobre --tj-layer-accent-02 não chegam a 4,5:1; não use texto com tom sobre essa camada. A mensagem sempre diz o que aconteceu (WCAG 1.4.1).
• Para anunciar uma mensagem que aparece depois, como um erro ao carregar, coloque o BaseText dentro de um contêiner com aria-live="polite" (ou role="alert" para erro) que já exista na tela antes da mensagem.
• Os textos acompanham o zoom do navegador até 200% sem cortar.
• Testado com axe em todos os estilos, tons e níveis, sem a regra de contraste (o jsdom não calcula cor). O contraste foi medido nos tokens com a fórmula do WCAG. O teste também confirma que o axe acusa um título sem texto e que o tom vence a cor de caption e overline.