Pular para o conteúdo
Faculdade PhorteDesign System

CourseCard

Em andamento

Cartão de curso do catálogo: imagem, categoria e selos ("Em breve", "Lista de espera", destaque), modalidade e carga horária, título, descrição, preço opcional (com o cheio riscado) e a chamada "Ver detalhes do curso". Sobre o Card: o link é o título, estendido sobre o cartão inteiro (E68).

Função
Cursos e matrícula
Também chamado de
cartão de curso, card de curso, vitrine de curso
Mora em
app/components/molecules/CourseCard.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. Proporcoes
  3. Sem Turma
  4. Com preço
  5. Com preço promocional
  6. Texto Longo
  7. Esqueleto

Quando usar

Em grades e listas do catálogo de cursos, com os dados de um `CatalogCourseDTO`.

Faça

  • Enquanto os dados chegam, mostre o CourseCardEsqueleto (E157) — um por cartão esperado, dentro de um EsqueletoGrupo rotulo="Carregando cursos" —, e troque o grupo inteiro pelos cartões quando chegarem.
  • Passe o curso como vem do serviço (CatalogCourseDTO): a opção principal, a categoria e o estado saem dele.
  • Use preco só quando o valor for real; com original, o cheio aparece riscado e o leitor ouve "Preço original" e "Preço com desconto".
  • Mantenha a mesma imageAspectRatio em todos os cartões de uma grade.
  • Troque o href quando o site clonado tiver outras rotas (padrão /curso/<slug>, E68).

Evite

  • Envolver o cartão em outro link: o título já leva ao curso, e o cartão inteiro é a área dele.
  • Pôr outro controle dentro do cartão sem relative z-(--z-elevado): a área do link o cobre.

Quando não usar. Para a vitrine de destaque da página inicial, com setas, use o TopCourses. Para as turmas de um curso, o TurmaCard. Para um cartão genérico, o Card.

Nota de uso

Curso inativo deixa de ser link. Antes virava <Link href="#">: recebia foco, anunciava-se como link e não levava a lugar nenhum — uma parada morta repetida a cada cartão inativo da grade.

Anatomia

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

  1. Cartão — O Card `interactive` como `<article>` (E68): `--card`, cantos `rounded-superficie`, borda e sombra do sistema.
  2. Imagem — O `CardMedia`, decorativo (`alt=""`), na proporção escolhida; aproxima no hover, só com movimento liberado.
  3. Selos sobre a foto — A categoria (Tag `vidro`, cortada no limite do cartão), "Em breve" (`indisponivel`), "Lista de espera" (`aviso`) e o destaque (`destaque`) — a Tag do sistema desde a E64.
  4. Informações — Modalidade com ícone e carga horária, em Tag `neutro` (E64).
  5. Título — `h3` de até duas linhas, com o `CardLink` dentro — o único link do cartão.
  6. Descrição — Até três linhas.
  7. Preço — Com `preco`: rótulo ("Investimento"), o cheio riscado, o atual e as parcelas.
  8. Chamada — "Ver detalhes do curso" (ou "Avise-me", na lista de espera): texto com aparência de botão verde, `aria-hidden` — quem leva é o link do título.

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 CourseCardEsqueleto (E157): a mesma superfície e proporção, com as linhas e a imagem em esqueleto, decorativo (aria-hidden); o grupo diz "Carregando cursos" uma vez. Medido na ficha: a mesma largura e menos de 20% de diferença de altura.
AbertoLink para o href; no hover, sobe 4px (com movimento liberado), a sombra cresce e o título fica vermelho.
Lista de esperaaggregateStatus="closed": selo "Lista de espera" e chamada "Avise-me".
Em breveaggregateStatus="inactive": selo "Em breve", 80% de opacidade, sem hover, sem preço nem chamada — e sem link.
FocoO anel de foco do cartão inteiro, só no teclado (has-focus-visible, E68).

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
Clique em qualquer lugar do cartãoLeva ao curso: a área do link do título cobre o cartão.
Curso inativoSem link: não recebe foco nem se anuncia como link — antes era um href="#" morto. O ref chega à raiz nos dois casos (E68).
Várias opções no cursoA principal é a primeira ativa ou em espera; sem nenhuma, a primeira.

Relacionados