# Footer

Rodapé padrão para páginas institucionais e produtos do ITpS.

> Documentação do Sinapse DS. Snippets shadcn usam os componentes do seu projeto (`@/components/ui/*`); snippets HTML usam as classes `itps-*` do CSS Sinapse (`/css/<versão>/`, veja `/comecar.md`). Componentes do site de documentação não fazem parte do DS.

- Categoria: Layout
- Status: stable

## 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`).

**React/Next (shadcn/ui)**

```tsx
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>
  )
}
```

**Vue 3/Nuxt 4 (shadcn-vue)**

```vue
<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>
```

**HTML (copy-first)**

```html
<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](/comecar).

**terminal · React/Next**

```sh
pnpm dlx shadcn@latest add @sinapse/footer
```

**terminal · Vue 3/Nuxt 4**

```sh
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](/fundamentos/marca#marca-itps-em-produtos).

## 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.

**HTML (copy-first)**

```html
<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](/fundamentos/marca#marca-itps-em-produtos).

**React/Next (shadcn/ui)**

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

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

**Vue 3/Nuxt 4 (shadcn-vue)**

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

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

**HTML (copy-first)**

```html
<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.