Pular para o conteúdo
Faculdade PhorteDesign System

Footer

Em andamento

O rodapé do site, no vermelho escuro: logotipo e redes sociais, as navegações "Institucional" e "Links Rápidos", contato com o botão do WhatsApp, o selo do e-MEC e as políticas. O conteúdo mora em dados (footerLinks.ts e navbarSocialLinks.ts, E71).

Função
Navegação e estrutura
Também chamado de
rodapé, footer
Mora em
app/components/organisms/Footer.tsx
Última mudança
2026-09-30
Ver como Markdown(abre em outra aba)Ficha no Storybook(abre em outra aba)

Prévia

A peça ao vivo, vinda da ficha, na largura escolhida. Em larguras fixas, ela roda num quadro do tamanho de uma tela de verdade.

1280px, em tamanho real

Pular a prévia
Variante Padrão, ao vivo — vem da ficha.Abrir sozinha(abre em outra aba)

Variantes na ficha

Lidas da ficha no build, na ordem do palco. Cada uma abre sozinha, sem o styleguide em volta — é o endereço que o palco carrega.

  1. Padrão

Quando usar

Uma vez, no fim de toda página do site — o PageLayout já o inclui.

Faça

  • Use pelo PageLayout, que já o põe depois do <main>.
  • Edite os links e o contato em footerLinks.ts, e as redes em navbarSocialLinks.ts — a mesma fonte da Navbar (E71).

Evite

  • Copiar o verde do WhatsApp para outra peça: é a única exceção de cor de terceiro do sistema, e vale só aqui.
  • Dois rodapés na página.
  • Escrever o e-mail em dois lugares: o texto e o mailto saem do mesmo campo.

Quando não usar. Numa página de campanha isolada, que não leva o site junto: rodape={null} no PageLayout, e os blocos de campanha (NewsletterStrip, por exemplo) fecham a página.

Nota de uso

Carrega a única exceção de cor de terceiro do sistema: o verde do WhatsApp (#25D366 / #128C7E), registrado em docs/token-contract.md. Não copie o hexadecimal para outra peça — a exceção vale para esta. O anel de foco do rodapé é o inverso (anel-de-foco-inverso), em todo link desde a E71 — o --ring media 1,40:1 sobre o vermelho escuro. O conteúdo mora em dados (E71): footerLinks.ts (grupos, contato, e-mail) e navbarSocialLinks.ts (as redes, a mesma fonte da Navbar). Todo link externo diz que abre em outra aba, pelo AvisoDeNovaAba.

Anatomia

As partes, na ordem em que o olho — e o teclado — passam.

  1. Marca — Logotipo sobre fundo branco, frase da missão e as três redes sociais, cada uma em 44×44 (E71).
  2. Institucional — Uma `<nav>` com o nome do `h2`, sete links.
  3. Links Rápidos — Uma `<nav>` com o nome do `h2`, seis links.
  4. Contato — Endereço, telefone, o e-mail (graduacao@faculdadephorte.edu.br, texto e link iguais), o botão do WhatsApp e o selo do e-MEC.
  5. Base — Direitos com o ano de hoje e a `<nav>` "Informações legais" (privacidade, cookies, termos).

Estados

Os estados que a peça tem no código, e o que muda em cada um.

Estados da peça e o que muda em cada um
EstadoO que muda
LinkBranco a 80%; no hover, branco pleno.
FocoO anel claro (anel-de-foco-inverso) em todos os links (E71); o WhatsApp mantém o seu.
Link externoO ícone de nova aba ao lado, e "(abre em nova aba)" para o leitor (E71).
Selo do e-MECNo hover, cresce para 105%, só com movimento liberado.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Links para fora do siteAbrem em outra aba (rel="noopener noreferrer") e dizem isso no nome — conferido no teste da ficha.
LarguraUma coluna no celular, duas a partir de 768px e quatro a partir de 1024px.
AnoO do copyright é o de hoje (era 2022, fixo).
Selo do e-MECLeva à consulta da Faculdade Phorte no cadastro do MEC (código 21940), o mesmo endereço do QR code do selo — era a página inicial do e-MEC (E134). O endereço mora em footerLinks.ts (FOOTER_CREDENCIAMENTO) — testado na ficha.

Relacionados