Pular para o conteúdo
Faculdade PhorteDesign System

TeamGrid

Em andamento

Seção "Conheça Nossa Equipe": quatro pessoas em grade — foto redonda, nome, cargo, uma frase e os links de LinkedIn e Twitter de quem os tiver. A equipe vem por equipe (E74).

Função
Campanha (marketing)
Também chamado de
equipe, time, quem somos, liderança
Mora em
app/components/organisms/marketing/TeamGrid.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 Padrao, 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. Padrao
  2. Sem redes

Quando usar

Numa página institucional, como vitrine da equipe.

Faça

  • Passe equipe, com linkedin e twitter só de quem tiver a rede.

Evite

  • Publicar com a equipe de exemplo (a que vem sem prop, sem rede nenhuma).

Quando não usar. Para professores de um curso, use o InstructorCards. Para palestrantes, o EventSpeaker.

Anatomia

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

  1. Título — Typography `h2` e a frase.
  2. Pessoa — Foto redonda de 192px, nome (`h3`), cargo em vermelho, frase e os links de rede que ela tiver (44px, E74).

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
PadrãoUma coluna no celular, duas a partir de 768px, quatro a partir de 1024px.
HoverA foto aproxima; o ícone da rede fica vermelho.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Links de redeLevam ao endereço da prop; rede sem endereço não aparece (E74 — eram oito links para #).

Relacionados