BaseFooter

O rodapé institucional dos sistemas do Tribunal: logo, ano, nome do Tribunal, versão do sistema e endereço, sobre o azul-marinho do cabeçalho. Pode trazer também alguns links, como o portal e a página de acessibilidade. Ele vem do Footer.vue do template-basico-vue da STI, com as cores e a fonte do design system. A página Partir do template da STI diz o que trocar.

© 2026 Tribunal de Justiça do Espírito Santo · Versão 1.4.0

Rua Desembargador Homero Mafra, 60, Enseada do Suá, Vitória - ES, 29050-906

• Portal do TJES (abre em nova aba)
• Acessibilidade
• Ouvidoria

Uso

• Use um BaseFooter por sistema, no slot footer do BaseAppShell. A moldura põe o rodapé embaixo do menu lateral e do conteúdo, de lado a lado, fora do <main>, e o empurra para o fim da janela quando a tela tem pouco conteúdo.
• Passe a versão do sistema em version, só o número: o rodapé escreve "Versão 1.4.0". No template da STI, ela vem de VITE_APP_VERSION.
• O ano é o atual. Passe year só quando precisar fixar outro.
• O nome e o endereço já vêm com os do Tribunal. Troque organization e address só se o sistema for de outra unidade. Para esconder o endereço, passe address="".
• Use links para poucos links institucionais, como portal, acessibilidade e ouvidoria. Os módulos do sistema ficam no menu lateral, não no rodapé.
• O slot logo recebe o BaseLogo com background="dark", o mesmo do cabeçalho, e no mesmo tamanho dele em cada largura: 44 px de altura, e 30 px abaixo de 992 px. Antes da versão 0.9.0, o logo do rodapé tinha 140 px de largura fixa, como no template, e no celular ficava maior que o do cabeçalho.

Anatomia

1. Logo: o slot logo, à esquerda, com a altura do logo do cabeçalho; some quando o slot não vem.
2. Linha de direitos: "©", o ano de year e o nome de organization, com a versão de version no fim.
3. Endereço: o texto de address, num <address>.
4. Links: os itens de links, numa navegação com o nome de linksLabel; só existem com links.

Com 768 px de largura ou mais, os links ficam à direita do logo e do texto. Abaixo de 576 px, o logo vai para cima do texto e tudo fica centralizado, como no template. A medida é a largura do próprio rodapé, não a da janela. O logo tem a altura do logo do cabeçalho: 44 px, e 30 px abaixo de 992 px.

Sem links e com rodapé estreito

© 2026 Tribunal de Justiça do Espírito Santo

Faça e não faça

Faça	Não faça
Pôr o BaseFooter no slot footer do BaseAppShell.	Pôr o rodapé dentro do BasePage: dentro do <main>, ele deixa de ser o rodapé da página para o leitor de tela.
Passar só o número da versão, como version="1.4.0".	Escrever "versão" ou "v" no valor: o rodapé já escreve "Versão".
Dar ao rodapé dois ou três links institucionais.	Repetir no rodapé os módulos do menu lateral.

Estilo

Propriedade	Token
Fundo	--tj-background-brand, igual nos dois temas, como o cabeçalho
Texto e links	--tj-text-on-brand; os links sempre sublinhados
Endereço	--tj-text-on-brand-secondary
Divisória de cima e entre logo e texto	--tj-border-on-brand
Tamanho do texto	--tj-text-sm e --tj-leading-sm
Altura do logo	44 px, e 30 px abaixo de 992 px, a mesma do logo do cabeçalho; dentro do BaseAppShell, a medida é a largura da moldura, como no cabeçalho
Margem	--tj-space-6 e --tj-space-8 (--tj-space-5 e --tj-space-4 abaixo de 992 px de janela)
Largura do conteúdo	--tj-content-max (1280 px), alinhada ao conteúdo da moldura
Foco nos links	contorno sólido de 2 px em --tj-text-on-brand

Código

<BaseAppShell product="Gestão de Obras" :nav="menu">
  <template #logo><BaseLogo background="dark" /></template>
  <RouterView />
  <template #footer>
    <BaseFooter
      :version="appVersion"
      :links="[
        { label: 'Portal do TJES', href: 'https://www.tjes.jus.br', external: true },
        { label: 'Acessibilidade', href: '/acessibilidade' },
      ]"
    >
      <template #logo><BaseLogo background="dark" /></template>
    </BaseFooter>
  </template>
</BaseAppShell>

Propriedades

Propriedade	Tipo	Padrão	Descrição
organization	string	'Tribunal de Justiça do Espírito Santo'	Nome na linha de direitos
year	number	new Date().getFullYear()	Ano na linha de direitos; sem ele, o ano atual
version	string	—	Versão do sistema, como "1.4.0", mostrada como "Versão 1.4.0"
address	string	'Rua Desembargador Homero Mafra, 60, Enseada do Suá, Vitória - ES, 29050-906'	Endereço do Tribunal; texto vazio esconde a linha
links	readonly FooterLink[]	[]	Links do rodapé, como portal, acessibilidade e ouvidoria
linksLabel	string	'Links do rodapé'	Nome acessível da navegação dos links; precisa ser diferente do nome do menu lateral

FooterLink: { label: string, href: string, external?: boolean }. Com external, o link abre em outra aba, mostra o ícone e avisa "(abre em nova aba)" ao leitor de tela, como o BaseLink.

Slot: logo (o logo branco do Tribunal). Não há eventos.

Acessibilidade

• Segue o padrão Landmarks do WAI-ARIA APG: o rodapé é um <footer>, que vira o marco contentinfo, o rodapé da página, quando está fora do <main>. No slot footer do BaseAppShell, ele fica sempre fora.
• Os links ficam numa navegação (<nav>) com o nome de linksLabel, "Links do rodapé" por padrão. O nome precisa ser diferente do menu lateral, para o leitor de tela distinguir as duas.
• O endereço fica num <address>.
• Teclado:

Tecla	O que faz
Tab	Passa pelos links do rodapé, depois do conteúdo da tela
Enter	Abre o link

• O foco nos links ganha contorno branco sólido, porque o contorno azul e o anel translúcido não chegam a 3:1 sobre o azul-marinho. O teste de contraste mede o branco e o texto secundário sobre o azul-marinho nos dois temas.
• Os links ficam sempre sublinhados: ao lado do texto branco, a cor sozinha não diria o que é link.
• Em alto contraste do Windows, o fundo some e a borda de cima separa o rodapé do conteúdo.
• Os testes passam o axe em jsdom em cada estado e rodam as regras de página inteira com a moldura completa: um só contentinfo, fora do <main>.
• Nesta documentação, os exemplos ficam dentro do <main> da própria página, então o rodapé aparece como um <footer> comum, não como contentinfo. O marco foi conferido nos testes, não aqui.