Como ele é
Lembra as vitrines de destaque da loja de apps da Apple. Uma fileira de cartões altos, de cantos bem arredondados, rola para o lado sem barra de rolagem visível, e duas setas redondas, embaixo à direita, avançam ou voltam. Cada cartão tem uma foto que preenche tudo, um degradê escuro no topo e, em branco, a categoria e o título. As fotos chegam desfocadas e ganham nitidez quando carregam, e os cartões entram subindo um após o outro. Ao clicar, o cartão se expande num painel, branco no modo claro e quase preto no escuro, sobre a página escurecida e desfocada.
Você pode estar procurando isto se pediu algo assim
- cards grandes com foto que deslizam para o lado, tipo site da Apple
- carrossel de cases que abre os detalhes quando clico no card
- vitrine de serviços com cartões altos e setas para passar
- mostrar os módulos do curso em cards que abrem uma página por cima
- aquele carrossel da App Store com cards de foto e título
- galeria horizontal de projetos para o portfólio com efeito de expandir
Também chamado de
- carrossel de cards
- card carousel
- carrossel de cards expansíveis
- carrossel horizontal
- expandable cards
- cards com modal
- horizontal scroll cards
Quando usar
- Vitrine de cases, projetos ou serviços em landing page
- Módulos de curso com uma página de detalhes por módulo
- Seção de novidades ou lançamentos de produto
- Portfólio em que cada projeto abre num painel com texto e imagens
Quando evitar
- Conteúdo que precisa abrir pelo teclado, sem antes pedir à IA cartões focáveis
- Itens para comparar lado a lado, que ficam escondidos na rolagem lateral
Como pedir para a sua IA
Crie um carrossel de cartões para os cases da minha landing: cartões altos com foto, categoria e título, rolagem lateral com setas, imagem que sai do desfoque ao carregar e painel expandido ao clicar, com cartões focáveis pelo teclado, Esc para fechar e versão sem animação para movimento reduzido.
Com o THM Componentes, você cola o prompt completo do catálogo junto com o código deste componente, e a IA reproduz este efeito exato em vez de improvisar.
Perguntas sobre Prateleira
Prateleira funciona no celular?
Sim. No celular, a fileira de Prateleira rola com o dedo, os cartões ficam menores e o toque abre o painel expandido. O painel fecha pelo botão, com um toque fora dele ou com Esc, e a página de trás não rola enquanto ele está aberto. O prompt do THM Componentes pede teste em mobile e comparação de LCP e INP.
O que posso colocar dentro do cartão aberto?
Qualquer conteúdo. Em Prateleira, o que você coloca dentro de cada cartão aparece no corpo do painel expandido, abaixo da categoria e do título: parágrafos, imagens, vídeos ou outros componentes. Os dados do cartão fechado são só três, imagem, título e categoria.
Prateleira respeita quem prefere menos movimento?
O componente original anima sempre: entrada dos cartões, abertura do painel e rolagem suave. O prompt do THM Componentes pede à IA uma versão estática para quem ativa a redução de movimento no sistema, o que em Prateleira significa cartões já no lugar e painel abrindo sem transição.
