Pular para o conteúdo
Faculdade PhorteDesign System

KnowledgeAreas

Em andamento

Seção "Áreas de Conhecimento": seis áreas com ícone (Educação, Saúde, Direito, Gestão, Tecnologia da Informação, Psicologia), cada uma levando ao catálogo filtrado, e o link "Ver todas as Áreas". Não recebe propriedades.

Função
Cursos e matrícula
Também chamado de
áreas, categorias, áreas de conhecimento
Mora em
app/components/organisms/KnowledgeAreas.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

Na página inicial, como atalho para o catálogo filtrado por área.

Faça

  • Edite as áreas no arquivo da peça: não há propriedade para elas.
  • Mantenha os nomes iguais aos do filtro do catálogo, para o endereço filtrar certo.

Evite

  • Mais áreas que a grade comporta: são seis colunas no computador.

Quando não usar. Para filtrar a grade na própria página, use o FilterGroup ou o CourseFilterSidebar. Para destacar cursos, o TopCourses.

Anatomia

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

  1. Título — Um SectionTitle centrado.
  2. Área — Item da lista (E77): link em cartão, com o ícone num IconBox `primary` `interativo` (fundo `--primary-subtle`, E64) e o nome.
  3. Ver todas — O Button `outline` com `href`, redondo, para `/cursos` (E77).

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
Nome em duas linhasO cartão fica da altura dos vizinhos da mesma linha, com o nome centralizado (E121) — testado na ficha.
PadrãoCartão com borda --border.
HoverBorda vermelha, sombra, o círculo fica vermelho cheio com ícone branco e o nome vermelho.
EntradaAo entrar na tela, o título e os cartões sobem e aparecem em sequência (motion, uma vez).

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Clique numa áreaLeva a /cursos?area=<nome>, com o nome codificado (E76; "Tecnologia da Informação" ia cru).
LarguraDuas colunas no celular, três a partir de 768px, seis a partir de 1024px.

Relacionados