Pular para o conteúdo
Faculdade PhorteDesign System

EventCard

Em andamento

Cartão de evento — congresso, live, encontro: imagem, a etiqueta do tipo (ou "Ao vivo agora", ou encerrado), data e duração, título, palestrante, descrição e a chamada, que muda com o estado: "Saiba mais", "Assistir agora" ou "Ver gravação". Sobre o Card: o link é o título, estendido sobre o cartão (E68).

Função
Eventos
Também chamado de
cartão de evento, card de evento, live, webinar
Mora em
app/components/organisms/EventCard.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.

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. Ao Vivo
  3. Encerrado
  4. Link Externo
  5. Mínimo
  6. Texto Longo
  7. Esqueleto

Quando usar

Em grades e listas de eventos, na página de eventos e em destaques da página inicial.

Faça

  • Enquanto os dados chegam, mostre o EventCardEsqueleto (E157) — um por cartão esperado, dentro de um EsqueletoGrupo rotulo="Carregando eventos" —, e troque o grupo inteiro pelos cartões quando chegarem.
  • Passe status="live" só durante a transmissão, e "closed" quando houver gravação — o tipo só aceita live, closed e open (E68).
  • Use external quando o link sair do site: abre em outra aba e o link avisa.
  • Passe date em formato que o Date entenda (ISO): o EventDate formata em pt-BR.

Evite

  • Pôr outro link ou botão dentro do cartão: a área do link do título o cobre.
  • status="live" num evento que ainda não começou.

Quando não usar. Para o destaque de topo da página de eventos, com slides, use o HeroCarousel. Para a programação de um evento, o EventSchedule. Para curso, o CourseCard.

Anatomia

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

  1. Cartão — O Card `interactive` como `<article>` (E68).
  2. Imagem — Decorativa (`alt=""`, E68 — repetia o título); aproxima no hover, com movimento liberado.
  3. Etiqueta — Uma Tag: o tipo (`default`), "Ao vivo agora" (`live`) ou o tipo em cinza (`closed`).
  4. Data — O EventDate (E68): calendário, a data num `<time>` e a duração.
  5. Título — `h3` de até duas linhas, com o `CardLink`.
  6. Palestrante e descrição — O EventSpeaker (E68) e a descrição, de até duas linhas.
  7. Chamada — Texto com seta, preso embaixo, `aria-hidden`.

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
CarregandoO EventCardEsqueleto (E157): a mesma superfície e proporção, com as linhas e a imagem em esqueleto, decorativo (aria-hidden); o grupo diz "Carregando eventos" uma vez. Medido na ficha: a mesma largura e menos de 20% de diferença de altura.
PróximoEtiqueta vermelha com o tipo; chamada "Saiba mais".
Ao vivostatus="live": etiqueta "Ao vivo agora" com o ponto pulsante; chamada "Assistir agora".
Encerradostatus="closed": etiqueta cinza, chamada "Ver gravação" e, no hover, um véu com o ícone de play.
FocoO anel de foco do cartão, só no teclado.
HoverSombra maior, imagem aproxima, título vermelho.

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Sem `link`Leva a /eventos/live/<id>.
`external`Abre em outra aba (rel="noopener noreferrer") e o nome do link termina em "(abre em nova aba)" — conferido no teste da ficha.
Data que o `Date` não entendeO EventDate mostra o texto como veio.

Relacionados