Footer — Sinapse Design System

Em cada stack

HTML e Astro: Classes itps-* do CSS Sinapse, com todas as variantes desta página.
React e Vue: Componentes padrão do shadcn (separator) com o tema Sinapse: cores, fonte e raio vêm do tema, e as variantes itps-* desta página existem só no HTML. O Button é o Sinapse. A linha de assinatura ITpS vem pronta (ItpsSignature, item itps-brand).

import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'

export function FooterExample() {
  return (
    <footer className="grid gap-8 rounded-lg border p-6">
      <div className="grid gap-6 md:grid-cols-[1.4fr_1fr_1fr]">
        <p className="max-w-sm text-sm text-muted-foreground">
          O Sinapse Design System reúne tokens, fundamentos, componentes e guias
          de implementação para produtos digitais.
        </p>

        <nav aria-label="Documentação" className="grid gap-2 text-sm">
          <h3 className="font-medium">Documentação</h3>
          <Button asChild variant="link" className="h-auto p-0">
            <a href="/comecar">Comece por aqui</a>
          </Button>
          <Button asChild variant="link" className="h-auto p-0">
            <a href="/fundamentos">Fundamentos</a>
          </Button>
          <Button asChild variant="link" className="h-auto p-0">
            <a href="/componentes">Componentes</a>
          </Button>
        </nav>

        <nav aria-label="Stacks" className="grid gap-2 text-sm">
          <h3 className="font-medium">Stacks</h3>
          <Button asChild variant="link" className="h-auto p-0">
            <a href="/desenvolver/react">React</a>
          </Button>
          <Button asChild variant="link" className="h-auto p-0">
            <a href="/desenvolver/vue">Vue 3</a>
          </Button>
          <span className="text-muted-foreground">HTML</span>
        </nav>
      </div>

      <Separator />

      <div className="flex flex-col gap-3 text-sm text-muted-foreground md:flex-row md:items-center md:justify-between">
        <a href="https://sinapse.org.br/">sinapse.org.br</a>
        <div className="flex flex-wrap gap-4">
          <a href="/termo-de-uso">Termo de Uso</a>
          <a href="/contato">Contato</a>
        </div>
      </div>
    </footer>
  )
}

<script setup lang="ts">
import { Button } from '@/components/ui/button'
import { Separator } from '@/components/ui/separator'
</script>

<template>
  <footer class="grid gap-8 rounded-lg border p-6">
    <div class="grid gap-6 md:grid-cols-[1.4fr_1fr_1fr]">
      <p class="max-w-sm text-sm text-muted-foreground">
        O Sinapse Design System reúne tokens, fundamentos, componentes e guias
        de implementação para produtos digitais.
      </p>

      <nav aria-label="Documentação" class="grid gap-2 text-sm">
        <h3 class="font-medium">Documentação</h3>
        <Button as-child variant="link" class="h-auto p-0">
          <a href="/comecar">Comece por aqui</a>
        </Button>
        <Button as-child variant="link" class="h-auto p-0">
          <a href="/fundamentos">Fundamentos</a>
        </Button>
        <Button as-child variant="link" class="h-auto p-0">
          <a href="/componentes">Componentes</a>
        </Button>
      </nav>

      <nav aria-label="Stacks" class="grid gap-2 text-sm">
        <h3 class="font-medium">Stacks</h3>
        <Button as-child variant="link" class="h-auto p-0">
          <a href="/desenvolver/react">React</a>
        </Button>
        <Button as-child variant="link" class="h-auto p-0">
          <a href="/desenvolver/vue">Vue 3</a>
        </Button>
        <span class="text-muted-foreground">HTML</span>
      </nav>
    </div>

    <Separator />

    <div class="flex flex-col gap-3 text-sm text-muted-foreground md:flex-row md:items-center md:justify-between">
      <a href="https://sinapse.org.br/">sinapse.org.br</a>
      <div class="flex flex-wrap gap-4">
        <a href="/termo-de-uso">Termo de Uso</a>
        <a href="/contato">Contato</a>
      </div>
    </div>
  </footer>
</template>

<footer class="itps-footer">
  <div class="itps-footer__grid">
    <div class="itps-footer__summary">
      <p class="itps-footer__description">
        O Sinapse Design System reúne tokens, fundamentos, componentes e guias
        de implementação para produtos digitais.
      </p>
    </div>

    <nav class="itps-footer__column" aria-label="Documentação">
      <h3 class="itps-footer__column-title">Documentação</h3>
      <ul class="itps-footer__list">
        <li><a href="/comecar" class="itps-footer__link">Comece por aqui</a></li>
        <li><a href="/fundamentos" class="itps-footer__link">Fundamentos</a></li>
        <li><a href="/componentes" class="itps-footer__link">Componentes</a></li>
      </ul>
    </nav>

    <nav class="itps-footer__column" aria-label="Stacks">
      <h3 class="itps-footer__column-title">Stacks</h3>
      <ul class="itps-footer__list">
        <li><a href="/desenvolver/react" class="itps-footer__link">React</a></li>
        <li><a href="/desenvolver/vue" class="itps-footer__link">Vue 3</a></li>
        <li><span class="itps-footer__text">HTML</span></li>
      </ul>
    </nav>
  </div>
</footer>

Instalação

O comando instala o Separator da sua stack, o Button Sinapse e a marca ITpS (ItpsSignature, item itps-brand) com o tema Sinapse. Configure o registry uma vez por projeto em Comece por aqui.

terminal · React/Next

pnpm dlx shadcn@latest add @sinapse/footer

terminal · Vue 3/Nuxt 4

pnpm dlx shadcn-vue@latest add https://dsystem.sinapse.org.br/r/vue/footer.json

Sem shadcn, não há instalação por componente: use o CSS Sinapse e as classes da API copy-first desta página.

Uso

O Footer não tem componente primitivo próprio no shadcn/ui. Em React/Next ou Vue 3/Nuxt 4, componha um <footer> semântico com Button asChild/as-child para links estilizados e Separator para dividir a linha legal.

Para HTML ou wrappers finos, use itps-footer. Esse é o contrato do CSS copy-first e já inclui grid responsivo, texto de apoio, colunas de navegação e estados de foco nos links.

Em todo produto do ITpS, a última linha do footer é a assinatura ITpS. Ela é obrigatória; veja abaixo e em Marca.

Exemplos

Estrutura

Peça	React/Next e Vue 3/Nuxt 4	HTML
Região	`<footer>`	`itps-footer`
Layout	grid com utilitários	`itps-footer__grid`
Resumo	texto semântico	`itps-footer__summary` + `itps-footer__description`
Coluna	`<nav aria-label>`	`itps-footer__column`
Título	heading local	`itps-footer__column-title`
Links	`Button asChild` / `Button as-child`	`itps-footer__link`
Texto não interativo	`<span>`	`itps-footer__text`
Divisão legal	`Separator`	`itps-footer__legal`
Assinatura ITpS	`ItpsSignature`	`itps-signature`

Legal e links

Use a linha legal quando o footer precisa expor site institucional, termos ou contato. Links continuam sendo elementos <a> reais; itens informativos ficam como texto para evitar falsos alvos de foco.

<footer class="itps-footer">
  <div class="itps-footer__grid">
    <div class="itps-footer__summary">
      <p class="itps-footer__description">
        Diretrizes para copiar o CSS, validar interfaces e aplicar o
        sistema visual Sinapse em qualquer stack.
      </p>
    </div>

    <nav class="itps-footer__column" aria-label="Produto">
      <h3 class="itps-footer__column-title">Produto</h3>
      <ul class="itps-footer__list">
        <li><a href="/estilos" class="itps-footer__link">Estilos</a></li>
        <li><a href="/desenvolver/ia" class="itps-footer__link">Usar com IA</a></li>
        <li><span class="itps-footer__text">Uso restrito ao ITpS</span></li>
      </ul>
    </nav>

    <nav class="itps-footer__column" aria-label="Suporte">
      <h3 class="itps-footer__column-title">Suporte</h3>
      <ul class="itps-footer__list">
        <li><a href="/comecar" class="itps-footer__link">Instalação</a></li>
        <li><a href="/desenvolver/react" class="itps-footer__link">Stacks</a></li>
        <li><a href="/componentes" class="itps-footer__link">Componentes</a></li>
      </ul>
    </nav>
  </div>

  <div class="itps-footer__legal">
    <a href="https://sinapse.org.br/" class="itps-footer__legal-text">
      sinapse.org.br
    </a>
    <ul class="itps-footer__legal-links">
      <li><a href="/termo-de-uso" class="itps-footer__link">Termo de Uso</a></li>
      <li><a href="/contato" class="itps-footer__link">Contato</a></li>
    </ul>
  </div>
</footer>

Assinatura ITpS

Obrigatória em todo produto do ITpS, como última linha do footer e em toda a largura da página: logo ITpS, ”© Uma iniciativa do Instituto Todos pela Saúde (ITpS)”, endereço e o link “Conheça o ITpS”. No celular ficam só o logo e a frase. Mantenha o texto como está; o padrão vem do Figma (Brand Usage) e está em Marca.

import { ItpsSignature } from '@/components/ui/itps-brand'

export function ProductFooter() {
  return (
    <footer>
      {/* marca, colunas e linha legal do produto */}
      <ItpsSignature />
    </footer>
  )
}

<script setup lang="ts">
import { ItpsSignature } from '@/components/ui/itps-brand'
</script>

<template>
  <footer>
    <!-- marca, colunas e linha legal do produto -->
    <ItpsSignature />
  </footer>
</template>

<footer>
  <div class="itps-footer">
    <!-- grid, colunas e linha legal do produto -->
  </div>

  <div class="itps-signature">
    <div class="itps-signature__content">
      <a href="https://www.itps.org.br/" class="itps-signature__brand" aria-label="Instituto Todos pela Saúde (ITpS)">
        <img src="/brand/itps/logo-cor.svg" alt="" class="itps-signature__logo dark:hidden">
        <img src="/brand/itps/logo-negativo.svg" alt="" class="itps-signature__logo hidden dark:block">
      </a>
      <div class="itps-signature__text">
        <p>© Uma iniciativa do <span class="itps-signature__name">Instituto Todos pela Saúde (ITpS)</span></p>
        <p class="itps-signature__address">Avenida Paulista, 1.938 - 16º andar, CEP: 01310-942 - São Paulo (SP)</p>
      </div>
      <a href="https://www.itps.org.br/" class="itps-signature__link">Conheça o ITpS</a>
    </div>
  </div>
</footer>

API copy-first

Classe/atributo	Uso
`itps-footer`	Região final da página com largura máxima e espaçamento responsivo.
`itps-footer__grid`	Organiza resumo e colunas de links.
`itps-footer__summary`	Limita a largura do texto institucional.
`itps-footer__description`	Texto de apoio do sistema, produto ou organização.
`itps-footer__column`	Coluna de navegação dentro do grid.
`itps-footer__column-title`	Heading curta para uma coluna de navegação.
`itps-footer__list`	Lista sem marcadores para links ou textos.
`itps-footer__link`	Anchor com cor, hover e foco do sistema.
`itps-footer__text`	Item informativo sem ação.
`itps-footer__legal`	Linha separada para organização, termos e contato.
`itps-footer__legal-text`	Link ou texto institucional da organização.
`itps-footer__legal-links`	Lista horizontal de links legais.
`itps-signature`	Faixa da assinatura ITpS, em toda a largura, como última linha do footer.
`itps-signature__content`	Linha da assinatura, com a mesma largura e espaçamento de `itps-footer`.
`itps-signature__brand`	Link para o site do ITpS com o logo e o divisor.
`itps-signature__logo`	Logo ITpS com 32 px de altura (cor no claro, negativo no escuro).
`itps-signature__text`, `itps-signature__name`	Frase ”© Uma iniciativa do Instituto Todos pela Saúde (ITpS)”.
`itps-signature__address`	Endereço do ITpS; some no celular.
`itps-signature__link`	Link “Conheça o ITpS”; some no celular.
`aria-label`	Nomeia cada coluna de navegação.

Acessibilidade

Use <footer> apenas uma vez por página ou por região independente. Agrupe listas de links em <nav aria-label="..."> quando existirem várias colunas. Não use Button para navegação copy-first; use <a>. Nos snippets shadcn, Button asChild/as-child preserva o elemento <a> como destino real.