Pular para o conteúdo
Faculdade PhorteDesign System

HeroCarousel

Em andamento

Carrossel de topo da página de eventos: cada slide é uma foto escurecida com o tipo, o título do evento, a descrição, a data e a chamada ("Saiba Mais" ou "Inscreva-se Agora"); setas e pontos trocam o slide. Não avança sozinho.

Função
Eventos
Também chamado de
carrossel de eventos, banner de eventos, destaque
Mora em
app/components/organisms/HeroCarousel.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 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. Slide único
  3. Sem link

Quando usar

No topo da página de eventos, para dois a quatro eventos em destaque.

Faça

  • Passe poucos eventos — cada slide é uma parada a mais no Tab.
  • Use external no evento com inscrição fora do site: a chamada vira "Inscreva-se Agora", abre em outra aba e diz isso ("abre em nova aba") — E74.
  • Deixe o link de fora quando o evento não tiver página: o slide fica sem chamada (E74) — era href="#".

Evite

  • Contar com o título do slide como h1 da página: desde a E75 ele é h2 — a página tem o h1 dela.
  • Lista vazia: o componente não renderiza nada.

Quando não usar. No topo da página inicial, com a busca de cursos, use o Hero. Para uma grade de eventos, o EventCard.

Anatomia

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

  1. Slide — Foto com véu escuro, sobrepostos; só o atual está visível.
  2. Conteúdo — Tipo (pílula vermelha), título (`h2`, E75), descrição, data e a chamada (Button `lg`).
  3. Setas — "Slide anterior" e "Próximo slide": o CarouselNavButton `dark` (E65) — 44px, 48px a partir de 768px, translúcidas; no hover, claras com a seta vermelha.
  4. Pontos — Um por slide; o atual é uma barra vermelha. Área de toque de 44px por pseudo-elemento.

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
Slide atualOpacidade 100%, e o conteúdo sobe e aparece em sequência.
Outros slidesOpacidade 0 e inert: fora do Tab e da árvore de acessibilidade.
Um evento sóSem setas nem pontos.
Evento sem `link`Sem chamada: só o tipo, o título, a descrição e a data.
Ponto atualBarra vermelha de 32px e aria-current="true".

Comportamento

Como a peça reage em cada situação
SituaçãoO que acontece
SetasTrocam o slide, dando a volta nas pontas.
PontoVai ao slide dele.
TempoNão troca sozinho — não há temporizador.
Troca de slideAnunciada numa região aria-live="polite": "Slide 2 de 3: <título>" (E75) — testado na ficha.

Relacionados