Pular para o conteúdo
Faculdade PhorteDesign System

PageLayout

Em andamento

O molde de toda página do site: link "Pular para o conteúdo", Navbar, o <main> que recebe o conteúdo e o Footer — e, em volta de tudo, a configuração que faz as animações respeitarem o movimento reduzido.

Função
Navegação e estrutura
Também chamado de
molde de página, template, layout, casca
Mora em
app/components/templates/PageLayout.tsx
Última mudança
2026-09-29
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
  2. Sem menu

Quando usar

Em volta de toda página do site: é ele que garante o link de pular, os marcos e o movimento reduzido.

Faça

  • Passe só o conteúdo da página como filho; menu e rodapé já estão.
  • Numa landing de campanha ou numa inscrição sem menu, cabecalho={null} (e, se for o caso, rodape={null}): o link de pular e o <main> continuam (E70). Ou passe outro cabeçalho no lugar.
  • Deixe o primeiro título da página (h1) no começo do conteúdo, logo depois do salto.
  • Importe ID_DO_CONTEUDO se precisar apontar para o início do conteúdo.

Evite

  • Encaixar dentro de um contêiner com transform sem saber: a Navbar é fixed e passa a se prender a ele.
  • Tirar o link de pular: com a Navbar, são mais de quinze paradas antes do conteúdo.

Quando não usar. Numa página de campanha que não leva o menu nem o rodapé do site; nesse caso, marque o <main id={ID_DO_CONTEUDO}> à mão. Dentro de outra página, nunca: são dois <main>.

Nota de uso

Traz o link de pular para o conteúdo e o <main tabIndex={-1}> que o recebe, além do MotionConfig reducedMotion="user" que faz o sistema inteiro respeitar a preferência. Monta uma Navbar fixed: ao encaixá-lo dentro de outro contêiner, lembre que fixed só se prende a um ancestral com transform.

Anatomia

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

  1. Pular para o conteúdo — Primeiro elemento focável; invisível até receber foco.
  2. Cabeçalho — `cabecalho`: a Navbar, por padrão — ou o que for passado, ou nada.
  3. Conteúdo — `<main id="conteudo" tabIndex={-1}>`, que ocupa o espaço que sobra.
  4. Rodapé — `rodape`: o Footer, por padrão.

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
Link de pular escondidosr-only: fora da tela, mas na ordem de Tab.
Link de pular com focoAparece no canto superior esquerdo, com fundo --card, sombra e anel de foco.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Enter no link de pularO foco vai ao <main> — medido — e o próximo Tab é o primeiro link do conteúdo.
Movimento reduzido no sistemaMotionConfig reducedMotion="user" faz as animações da biblioteca motion pularem o deslocamento, em toda a árvore.
Sem menu (`cabecalho={null}`)Sem banner; o link de pular e o main continuam — conferido no teste da ficha.

Relacionados