Pular para o conteúdo
Faculdade PhorteDesign System

SectionTitle

Em andamento

Título de seção com chapéu opcional (em vermelho, caixa alta), o título (h2 por padrão, tituloComo escolhe) e uma descrição, alinhados à esquerda, ao centro ou à direita — com versão para fundo escuro.

Função
Conteúdo
Também chamado de
título de seção, cabeçalho de seção, chapéu
Mora em
app/components/molecules/SectionTitle.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.

Na largura da página: 0px

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. Centralizado
  3. Só título
  4. Texto Longo
  5. Sobre Fundo Escuro

Quando usar

No começo de cada seção de uma página — "Os Cursos", "Depoimentos", "Dúvidas Frequentes".

Faça

  • Use o chapéu para a categoria ("Pós-Graduação") e o título para a promessa.
  • Use superficie="escura" sobre fundo escuro (E72; o antigo titleColor="white" é apelido por um ciclo): chapéu, título e descrição nos tokens inversos.
  • Acerte o nível com tituloComo: h1 quando é o título da página, h3 numa subseção (E72).
  • Nomeie a seção pelo título: idDoTitulo={id} aqui e aria-labelledby={id} na <section> em volta, com o id do useId() (E76). Só o título — chapéu e descrição ficam de fora do nome.
  • Centralize só em seção centrada — texto longo centrado cansa.

Evite

  • Chapéu vermelho sobre fundo escuro: media 3,46:1 — por isso, com superficie="escura", ele muda sozinho.
  • Deixar o h2 padrão numa subseção de outra seção h2: acerte o tituloComo.

Quando não usar. Para um título solto sem chapéu nem descrição, a Typography basta. Para o título da página (h1), a Typography com variant="h1".

Anatomia

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

  1. Chapéu — `subtitle`: `tiny` (12px, caixa alta), vermelho; branco sobre escuro.
  2. Chapéu e título — Num `<hgroup>` (E72): o chapéu é um `<p>` e o título, o `tituloComo` (padrão `h2`), até `max-w-3xl`.
  3. Descrição — `description`: parágrafo cinza (`--ink-inverse-muted` sobre escuro, E72 — era branco a 80% de opacidade), até `max-w-2xl`.

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
Sobre claroChapéu --primary, título --ink, descrição --muted-foreground.
Sobre escurosuperficie="escura": chapéu e título --ink-inverse, descrição --ink-inverse-muted.
Alinhamentoleft (padrão), center ou right.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Sem `subtitle` ou `description`A parte simplesmente não aparece.

Relacionados