Pular para o conteúdo
Faculdade PhorteDesign System

CurriculumAccordion

Em andamento

Seção "O que você irá Aprender?" de página de campanha: chapéu "Conteúdo Programático", título, descrição e a grade curricular num Accordion, cada módulo com a lista de disciplinas. Os módulos vêm por modulos (E77); sem a prop, entra a grade de exemplo (um curso de tradução). A grade sozinha, sem a seção, é a ListaCurricular — a peça única de currículo, que o Cursos Livres também usa.

Função
Cursos e matrícula
Também chamado de
grade curricular, conteúdo programático, matriz curricular, disciplinas
Mora em
app/components/organisms/marketing/CurriculumAccordion.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.

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. Outra grade

Quando usar

Em página de campanha de um curso, como vitrine do padrão de grade curricular.

Faça

  • Passe modulos: título, subtítulo (carga, semestre), itens (as disciplinas) e descricao.

Evite

  • Publicar com a grade de exemplo: é de um curso de tradução específico.

Quando não usar. Para a grade sem a seção em volta (dentro de uma página de curso), use a ListaCurricular exportada daqui. Para perguntas frequentes, o FAQ.

Anatomia

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

  1. Chapéu — "Conteúdo Programático", pílula vermelha clara com ícone.
  2. Título — Typography `h2`, com "Aprender?" em vermelho.
  3. Descrição — Parágrafo cinza.
  4. Grade — A `ListaCurricular` (E77): um Accordion; cada item é um módulo com subtítulo, o texto e a lista de disciplinas com visto.

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
FechadoSó os semestres; um aberto por vez (Accordion sem allowMultiple).
AbertoA lista de disciplinas do semestre.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Abrir um semestreFecha o que estava aberto e mostra as disciplinas — medido.
Entrada na telaAbaixo da dobra, sobe 20px e aparece ao entrar na tela, uma vez. O HTML do servidor já sai visível, e o que está à vista ao abrir não é escondido — sem JavaScript, nada some (E138, testado). Com movimento reduzido, não anima.

Relacionados