Footer — Sinapse Design System

Default

Componente sem props — estrutura fixa: descrição ITpS + 2 colunas de links + linha legal com endereço e CTA.

<Footer />

<template>
<footer class="border-t border-border bg-card text-foreground py-12">
  <div class="mx-auto max-w-6xl px-6 grid gap-8 md:grid-cols-4">
    <div class="md:col-span-2">
      <p class="font-semibold">Instituto Todos pela Saúde</p>
      <p class="mt-2 text-sm text-muted-foreground max-w-md">Descrição institucional.</p>
    </div>
    <div>
      <p class="text-sm font-semibold mb-2">Sobre</p>
      <ul class="space-y-1 text-sm"><li><a href="#" class="itps-link">Quem somos</a></li></ul>
    </div>
    <div>
      <p class="text-sm font-semibold mb-2">Contato</p>
      <ul class="space-y-1 text-sm"><li><a href="#" class="itps-link">Fale conosco</a></li></ul>
    </div>
  </div>
</footer>
</template>

<footer className="border-t border-border bg-card text-foreground py-12">
<div className="mx-auto max-w-6xl px-6 grid gap-8 md:grid-cols-4">
  <div className="md:col-span-2">
    <p className="font-semibold">Instituto Todos pela Saúde</p>
    <p className="mt-2 text-sm text-muted-foreground max-w-md">Descrição institucional.</p>
  </div>
  <div>
    <p className="text-sm font-semibold mb-2">Sobre</p>
    <ul className="space-y-1 text-sm"><li><a href="#" className="itps-link">Quem somos</a></li></ul>
  </div>
  <div>
    <p className="text-sm font-semibold mb-2">Contato</p>
    <ul className="space-y-1 text-sm"><li><a href="#" className="itps-link">Fale conosco</a></li></ul>
  </div>
</div>
</footer>

<footer class="border-t border-border bg-card text-foreground py-12">
<div class="mx-auto max-w-6xl px-6 grid gap-8 md:grid-cols-4">
  <div class="md:col-span-2">
    <p class="font-semibold">Instituto Todos pela Saúde</p>
    <p class="mt-2 text-sm text-muted-foreground max-w-md">Descrição institucional.</p>
  </div>
  <div>
    <p class="text-sm font-semibold mb-2">Sobre</p>
    <ul class="space-y-1 text-sm"><li><a href="#" class="itps-link">Quem somos</a></li></ul>
  </div>
  <div>
    <p class="text-sm font-semibold mb-2">Contato</p>
    <ul class="space-y-1 text-sm"><li><a href="#" class="itps-link">Fale conosco</a></li></ul>
  </div>
</div>
</footer>

Quando usar

Páginas institucionais ITpS
Landing pages do Sinapse e produtos derivados
Layouts da showcase do DS (já consumido)

Customização

Componente é stateless — não aceita props. Para variantes (ex: footer de ProductFooter, ou layouts internos), use componentes especializados ou crie um wrapper que componha as células do footer manualmente.

Conteúdo (colunas, endereço, links legais) está hardcoded no Footer.astro. Mudanças centralizadas — edite o componente diretamente.

Props

Não há. Estrutura fixa.