Pular para o conteúdo
Faculdade PhorteDesign System

EventSpeaker

Em andamento

Palestrante de um evento: foto pequena (quando há), nome em negrito e cargo embaixo. É o PessoaResumo (E72) com o cargo — o mesmo primitivo do autor do BlogCard e do autor do depoimento.

Função
Eventos
Também chamado de
palestrante, speaker, convidado, professor
Mora em
app/components/molecules/EventSpeaker.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. Sem Foto
  3. Só nome
  4. Lista
  5. Texto Longo
  6. PessoaResumo nos dois fundos

Quando usar

Na página de um evento ou na programação, para dizer quem fala.

Faça

  • Passe jobTitle com a credencial que importa para o evento ("Fisioterapeuta, doutora pela USP").
  • Use em lista quando houver vários palestrantes.
  • Para outra pessoa (autor, depoente), use o PessoaResumo direto: linha, href para o nome, tamanho (sm, md), superficie (clara, escura) e nomeComo (h3 quando o nome abre um bloco).

Evite

  • Contar com as iniciais quando falta a foto: sem avatar, o círculo não aparece.

Quando não usar. Para a equipe da instituição, com cartões, use o TeamGrid. Para vários rostos sem nome, o AvatarGroup.

Nota de uso

Passou a usar o Avatar do sistema em vez de um <img> próprio. Ganha o tratamento de imagem quebrada e para de duplicar o átomo, mas a borda mudou de 1px `border` para 2px `surface` — diferença pequena e real, declarada no commit. O avatar é decorativo: o nome está logo ao lado, em texto, e o leitor não precisa ouvi-lo duas vezes.

Anatomia

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

  1. Foto — Um Avatar `sm` (32px), decorativo — o nome está ao lado.
  2. Nome — `text-sm` em negrito.
  3. Cargo — `text-xs` cinza.

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
Com fotoAvatar, nome e cargo.
Sem fotoSó nome e cargo, sem círculo.
Só nomeSem cargo.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Foto que falhaO Avatar troca pelas iniciais do nome.

Relacionados