Pular para o conteúdo
Faculdade PhorteDesign System

InstructorCards

Em andamento

Seção do corpo docente: chapéu, título e descrição (o SectionTitle) e um cartão por professor — foto, nome, titulação, cargo, uma trajetória curta e as credenciais. Os professores vêm por prop; sem ela, entram dois de exemplo. Estrutura refeita na revisão 3 (E129).

Função
Campanha (marketing)
Também chamado de
professores, corpo docente, instrutores, mentores
Mora em
app/components/organisms/marketing/InstructorCards.tsx
Última mudança
2026-10-01
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. Três professores

Quando usar

Em página de curso ou de campanha, para apresentar quem ensina.

Faça

  • Passe os professores reais: nome, titulação, cargo, bio de duas ou três linhas, foto de rosto e credenciais curtas.
  • Escreva as credenciais em pt-BR e coerentes com a titulação ("Mestrado USP" para quem é mestre).
  • Use fotos de rosto no mesmo enquadramento: o cartão corta em quadrado.

Evite

  • Biografia longa: três linhas bastam; o resto vai para a página do professor.
  • Mais de seis professores numa seção: vire uma página de corpo docente.

Quando não usar. Para a equipe da instituição, use o TeamGrid. Para palestrantes de um evento, o EventSpeaker.

Anatomia

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

  1. Cabeçalho — SectionTitle centrado: chapéu, título (h2) e descrição.
  2. Cartão — Card em pé (`article`), da altura da linha: foto quadrada no alto (CardMedia 1/1), o texto com o espaço do CardContent.
  3. Nome, titulação e cargo — Nome no `h3` (20px, negrito), titulação em `--primary-dark`, cargo em `--muted-foreground`.
  4. Bio — 14px, `--muted-foreground`, sem aspas (não é citação).
  5. Credenciais — Lista de Badge `outline` com o ícone de prêmio, no pé do cartã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
Dois professoresDuas colunas centradas a partir de 768px (tablet), até 768px de largura.
Três ou maisDuas colunas a partir de 768px (tablet) e três a partir de 1024px.
CelularUma coluna, o cartão inteiro.
HoverNada: o cartão não é clicável (E129). Até a revisão 3 ele subia 8px e a foto aproximava.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Entrada na telaAbaixo da dobra, os cartões sobem 20px e aparecem em cascata 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.
Bio de tamanhos diferentesOs cartões da mesma linha ficam da mesma altura, com as credenciais no pé — testado na ficha.

Relacionados